/* ===============================================================
   FOOTER v2  ·  parts/footer.css
   ---------------------------------------------------------------
   RONG AR SPACING EI FILE E BODLABEN NA.
   Sob main.css er "HEADER + FOOTER CONTROL PANEL" block e:
     --foot-bg  --foot-head  --foot-text  --foot-link
     --foot-link-hover  --foot-line  --foot-pad  --foot-gap

   Ei file ta sudhu KAATHAMO (kon jinis kothay boshbe) thik kore.

   Layout:
     Phone      1 column, link 2 column
     Tablet     brand | link (2 col)
     Desktop    brand | link (4 col) | newsletter
   =============================================================== */

.site-foot{
  background:var(--foot-bg);
  color:var(--foot-text);
  padding:var(--foot-pad) 0 28px;
}

/* --- Upor er grid --- */
.foot__top{
  display:grid;
  gap:36px var(--foot-gap);
  grid-template-columns:1fr;
}
@media (min-width:768px){
  .foot__top{grid-template-columns:1fr 1fr}
}
@media (min-width:1024px){
  /* Newsletter nai: brand | 4 column link */
  .foot__top{grid-template-columns:minmax(240px,1fr) minmax(0,2.1fr)}
}
@media (min-width:1200px){
  /* Newsletter ache: brand | link | newsletter */
  .site-foot--news .foot__top{grid-template-columns:minmax(230px,1fr) minmax(0,2fr) minmax(240px,1.1fr)}
}

/* --- 1. Brand block --- */
.site-foot .brand{color:var(--foot-head)}
.site-foot .brand__mark{background:var(--head-mark-bg)}
.foot__desc{
  font-size:15px;line-height:1.6;color:var(--foot-text);
  margin-top:16px;max-width:40ch;
}
.foot__nap{
  display:grid;gap:10px;margin-top:20px;
  font-style:normal;font-size:14px;line-height:1.5;color:var(--foot-link);
}
.foot__nap > span,.foot__nap > a{display:flex;align-items:flex-start;gap:9px;color:var(--foot-link)}
.foot__nap .ico{margin-top:2px;flex:none}
@media (hover:hover){ .foot__nap a:hover{color:var(--foot-link-hover)} }
.foot__nap a:focus-visible{outline:3px solid var(--focus-ring-inverse);outline-offset:2px;border-radius:4px}

.foot__social{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.foot__so{
  width:38px;height:38px;flex:none;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.12);color:var(--foot-head);
  transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
@media (hover:hover){ .foot__so:hover{background:var(--foot-link-hover);color:var(--teal-900)} }
.foot__so:focus-visible{outline:3px solid var(--focus-ring-inverse);outline-offset:2px}

/* --- 2. Link column --- */
.foot__cols{
  display:grid;
  gap:28px 24px;
  grid-template-columns:1fr 1fr;
}
@media (min-width:1024px){ .foot__cols{grid-template-columns:repeat(4,1fr)} }

.foot__h{
  font-family:var(--font-heading);font-weight:700;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--foot-head);margin-bottom:14px;
}
.foot__links{display:grid;gap:2px}
.foot__links a{
  display:inline-block;padding:6px 0;
  font-family:var(--font-body);font-weight:400;font-size:14.5px;line-height:1.45;
  color:var(--foot-link);
  transition:color var(--dur-fast) var(--ease);
}
@media (hover:hover){ .foot__links a:hover{color:var(--foot-link-hover)} }
.foot__links a:focus-visible{outline:3px solid var(--focus-ring-inverse);outline-offset:2px;border-radius:4px}

/* --- 3. Newsletter --- */
.foot__form{display:grid;gap:10px;margin-top:16px}
.foot__form input{
  width:100%;min-height:48px;padding:12px 14px;border-radius:var(--radius-sm);
  border:1px solid transparent;background:var(--white);color:var(--text-strong);
  font-family:var(--font-body);font-size:16px;
}
.foot__form input::placeholder{color:var(--neutral-500)}
.foot__form input:focus{outline:3px solid var(--focus-ring-inverse);outline-offset:2px}
.foot__form .btn{text-transform:uppercase;letter-spacing:.06em}

/* --- 4. Niche er bar --- */
.foot__bottom{
  display:flex;flex-wrap:wrap;gap:12px 24px;
  align-items:center;justify-content:space-between;
  margin-top:44px;padding-top:22px;
  border-top:1px solid var(--foot-line);
  font-size:13.5px;color:var(--foot-link);
}
.foot__legal{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot__legal a{color:var(--foot-link)}
@media (hover:hover){ .foot__legal a:hover{color:var(--foot-link-hover)} }
.foot__legal a:focus-visible{outline:3px solid var(--focus-ring-inverse);outline-offset:2px;border-radius:4px}

@media (max-width:600px){
  .foot__bottom{flex-direction:column;align-items:flex-start;gap:14px}
}

/* Admin ke dekhano setup help. Visitor eta kokhono dekhe na. */
.foot__setup{
  border:1px dashed var(--foot-line);border-radius:var(--radius-md);
  padding:16px 18px;align-self:start;
}
.foot__setup a{color:var(--foot-link-hover);text-decoration:underline;text-underline-offset:3px}
.foot__setup .foot__desc{margin-top:0;max-width:none}