/* ==================================================
   seo.css — багатомовний SEO-блок
   PROD build 26-04-2025 + patch 26-04-2025 (arrow-right + accessibility)
   ================================================== */

/* ---------- кореневі змінні ---------------------- */
:root{ --card-bg:#ffffff; }
body.dark-theme{ --card-bg:#1d1d1f; }

/* ---------- wrapper -------------------------------- */
.seo-block{
  /* fluid-padding 50-90 px */
  padding-block:clamp(50px,14vh,90px);
  background:linear-gradient(135deg,#f9fafb,#ffffff);
  color:#111;
}
body.dark-theme .seo-block{
  background:linear-gradient(135deg,#121212,#1a1a1a);
  color:#f0f0f0;
}
.seo-block .container{
  max-width:860px;margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}

/* ---------- multilang visibility ------------------ */
.seo-lang-block{display:none;}
html:lang(uk) .seo-lang-block[data-lang="uk"],
html:lang(en) .seo-lang-block[data-lang="en"],
html:lang(pl) .seo-lang-block[data-lang="pl"]{display:block;}

/* ---------- title / lead -------------------------- */
.seo-title{
  font-size:clamp(1.7rem,4.4vw,2.2rem);
  font-weight:800;line-height:1.4;margin-bottom:30px;
}
.gradient-text{
  background:linear-gradient(90deg,#4f46e5,#8b5cf6);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.seo-lead{
  font-size:1.1rem;line-height:1.8;max-width:780px;
  margin:0 auto 60px;color:#555;
}
body.dark-theme .seo-lead{color:#bbb;}

/* ---------- accordion (⚡ patched) ----------------- */
.accordion{display:flex;flex-direction:column;width:100%;}
.accordion-item{
  background:var(--card-bg);border-radius:14px;margin-bottom:16px;
  box-shadow:0 4px 18px rgba(0,0,0,.06);
  transition:box-shadow .3s,transform .2s;
}
body.dark-theme .accordion-item{box-shadow:0 4px 18px rgba(255,255,255,.04);}
.accordion-item:hover{
  box-shadow:0 8px 22px rgba(99,102,241,.08);
  transform:translateY(-2px);
}

.accordion-header{
  display:flex;align-items:center;width:100%;
  font-size:1.05rem;font-weight:600;padding:18px 20px;
  cursor:pointer;background:transparent;border:none;color:inherit;
  text-align:left;outline:0;
}
/* стрілка завжди праворуч */
.accordion-header::after{
  content:"▶";
  margin-left:auto;
  font-size:1rem;
  color:#6366f1;
  transition:transform .3s,color .3s;
}
.accordion-item.active .accordion-header::after{
  transform:rotate(90deg);
  color:#8b5cf6;
}
/* клавіатурна навігація */
.accordion-header:focus-visible{
  box-shadow:0 0 0 3px rgba(99,102,241,.4);
  border-radius:10px;
}

.accordion-body{
  max-height:0;overflow:hidden;padding:0 20px;
  font-size:.98rem;line-height:1.65;color:inherit;
  transition:max-height .3s ease,padding .3s ease;
}
.accordion-item.active .accordion-body{
  max-height:2000px;padding:16px 20px 20px;
}
.accordion-body strong{font-weight:600;color:#000;}
body.dark-theme .accordion-body strong{color:#fff;}

/* ---------- CTA button ---------------------------- */
.seo-cta{margin-top:60px;text-align:center;}
.btn-gradient{
  display:inline-flex;align-items:center;gap:10px;padding:12px 24px;
  font-size:1.1rem;font-weight:600;color:#fff;text-decoration:none;
  border-radius:20px;background:linear-gradient(90deg,#4f46e5,#8b5cf6);
  box-shadow:0 4px 14px rgba(79,70,229,.3);transition:.3s;
}
.btn-gradient:hover{
  background:linear-gradient(90deg,#3b82f6,#6366f1);
  box-shadow:0 6px 20px rgba(59,130,246,.4);transform:translateY(-2px);
}
.btn-gradient img.btn-icon{width:20px;height:20px;filter:brightness(0) invert(1);}

/* ---------- prefers-reduced-motion ---------------- */
@media (prefers-reduced-motion:reduce){
  .accordion-item,
  .btn-gradient{transition:none;}
}

/* ---------- responsive ---------------------------- */
/* ≤ 768 px */
@media (max-width:768px){
  .seo-block{padding-block:clamp(60px,22vh,80px);}
  .seo-lead{font-size:1rem;margin-bottom:40px;}
  .accordion-header{font-size:1rem;padding:14px 16px;}
  .accordion-body{font-size:.95rem;padding:0 16px;}
  .accordion-item.active .accordion-body{padding:14px 16px 16px;}
  .btn-gradient{font-size:.95rem;}
}
/* ≤ 640 px */
@media (max-width:640px){
  .seo-title{font-size:1.6rem;}
  .seo-lead{font-size:.95rem;}
  .accordion-header{font-size:.95rem;padding:12px 14px;}
  .accordion-body{font-size:.9rem;padding:0 14px;}
  .accordion-item.active .accordion-body{padding:12px 14px 14px;}
  .btn-gradient{width:100%;font-size:.92rem;padding:12px 20px;}
}
/* ≤ 480 px */
@media (max-width:480px){
  .seo-block{padding-block:50px;}
}
/* ≤ 360 px (додатково) */
@media (max-width:360px){
  .seo-title{font-size:1.45rem;}
  .seo-lead{font-size:.88rem;}
}