/* =====================================================================
 * Gebeya Media — Legal pages (Privacy / Terms)
 * ===================================================================*/

.legal-banner{
  background:linear-gradient(135deg,#0d2010 0%,#1a3c1a 50%,#0d2010 100%);
  color:#fff;border-radius:1.25rem;padding:2.25rem 1.75rem;
  position:relative;overflow:hidden;margin-bottom:1.5rem;
}
.legal-banner::after{
  content:"";position:absolute;inset:0;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60" fill="none"><circle cx="30" cy="30" r="1.2" fill="rgba(255,255,255,.06)"/></svg>') repeat;
}
.legal-banner > *{position:relative;z-index:1}
.legal-banner h1{font-size:2.25rem;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:.5rem 0}
.legal-banner .legal-eyebrow{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;background:rgba(34,197,94,.18);color:#bbf7d0;padding:.3rem .75rem;border-radius:9999px}
.legal-updated-pill{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);padding:.35rem .8rem;border-radius:9999px;font-size:.8rem;font-weight:600}

.legal-langtoggle{display:inline-flex;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:9999px;padding:.2rem;gap:.15rem}
.legal-langtoggle button{
  background:transparent;color:#cbd5e1;border:0;border-radius:9999px;
  padding:.4rem .9rem;font-size:.8rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem
}
.legal-langtoggle button.is-on{background:#16a34a;color:#fff;box-shadow:0 0 0 1px #16a34a}

/* ===== Last updated callout ===== */
.legal-updated-box{background:#f0f7f0;border-left:4px solid #16a34a;border-radius:.6rem;padding:1rem 1.25rem;margin-bottom:1.25rem;display:flex;align-items:flex-start;gap:.75rem}
.legal-updated-box .lub-ico{font-size:1.5rem;flex-shrink:0}
.legal-updated-box strong{color:#14532d}

/* ===== TOC sidebar ===== */
.legal-toc{position:sticky;top:80px;background:#fff;border:1px solid #e5e7eb;border-radius:.85rem;padding:1rem;max-height:calc(100vh - 100px);overflow-y:auto}
.legal-toc h3{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:#64748b;margin-bottom:.65rem}
.legal-toc a{display:flex;align-items:center;gap:.55rem;padding:.45rem .65rem;border-radius:.4rem;font-size:.85rem;color:#475569;text-decoration:none;line-height:1.3}
.legal-toc a:hover{background:#f0fdf4;color:#15803d}
.legal-toc a.is-active{background:#dcfce7;color:#15803d;font-weight:700}
.legal-toc a .toc-num{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:50%;background:#e2e8f0;color:#475569;font-size:.7rem;font-weight:800;flex-shrink:0;transition:background .15s}
.legal-toc a.is-active .toc-num{background:#16a34a;color:#fff}

/* Mobile TOC select */
.legal-toc-mobile{display:none}
@media (max-width: 1024px){
  .legal-toc{display:none}
  .legal-toc-mobile{display:block;margin-bottom:1rem}
  .legal-toc-mobile select{width:100%;padding:.7rem 1rem;border-radius:.6rem;border:1px solid #cbd5e1;background:#fff;font-weight:600;font-size:.9rem}
}

/* ===== Main card ===== */
.legal-card{background:#fff;border-radius:1rem;border:1px solid #e5e7eb;overflow:hidden;max-width:860px}
.legal-card section{padding:2rem 2rem 1.5rem;border-bottom:1px solid #e5e7eb;position:relative;scroll-margin-top:80px}
.legal-card section:nth-of-type(even){background:#f9fafb}
.legal-card section:last-child{border-bottom:0}
.legal-card section h2{display:flex;align-items:center;gap:.85rem;font-family:'Montserrat','Segoe UI',sans-serif;font-weight:700;font-size:1.2rem;color:#0f172a;margin:0 0 .85rem;padding-bottom:.6rem;border-bottom:1px solid #e5e7eb}
.legal-card section h2::before{
  content:attr(data-num);
  display:inline-flex;align-items:center;justify-content:center;
  width:2rem;height:2rem;border-radius:50%;
  background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;font-size:.85rem;font-weight:800;flex-shrink:0;
  box-shadow:0 4px 12px -4px rgba(22,163,74,.4)
}

/* Native h2 doesn't read attributes — JS sets data-num after load. As a
   no-JS fallback, use the data-num attr we already render directly. */
.legal-card section[data-num] > h2::before{ content: attr(data-num) ' '; padding:0;background:#16a34a;color:#fff;width:2rem;height:2rem;display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;font-size:.8rem;font-weight:800;font-family:'Montserrat',sans-serif;letter-spacing:0 }

.legal-card .lang-en{font-family:'Montserrat','Segoe UI',sans-serif;font-size:15px;color:#333;line-height:1.7}
.legal-card .lang-am{font-family:'Noto Sans Ethiopic','SurGraphics',sans-serif;font-size:15px;color:#555;line-height:1.85;border-top:1px dashed #e5e7eb;margin-top:1rem;padding-top:1rem}
.legal-card .lang-am::before{content:"አማርኛ";display:inline-block;font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:#16a34a;margin-bottom:.5rem;padding:.15rem .5rem;background:#dcfce7;border-radius:9999px}
.legal-card p{margin:0 0 .75rem}
.legal-card ul{margin:0 0 .75rem 1.5rem;padding:0}
.legal-card li{margin-bottom:.35rem}
.legal-card a{color:#15803d;text-decoration:underline;text-decoration-color:#86efac;text-underline-offset:3px}
.legal-card a:hover{color:#14532d;text-decoration-color:#16a34a}

/* ===== Callouts ===== */
.legal-card .callout{padding:.85rem 1rem;border-radius:.5rem;margin:1rem 0;border-left:4px solid #16a34a;background:#f0f7f0}
.legal-card .callout-key{border-left-color:#0ea5e9;background:#f0f9ff}
.legal-card .callout-warn{border-left-color:#f97316;background:#fff7ed}

/* ===== Footer of legal page ===== */
.legal-footer{margin-top:1.5rem;background:#fff;border:1px solid #e5e7eb;border-radius:1rem;padding:1.75rem;text-align:center}
.legal-footer h3{font-weight:800;color:#0f172a;margin-bottom:1rem}

/* ===== Print ===== */
@media print{
  body > nav, header, footer, .legal-banner .legal-langtoggle,
  .legal-toc, .legal-toc-mobile, .legal-footer, #cookie-banner{display:none !important}
  .legal-banner{background:#fff !important;color:#000 !important;border:1px solid #000;page-break-after:avoid}
  .legal-banner h1{font-size:1.5rem}
  .legal-card{border:0;box-shadow:none}
  .legal-card section{page-break-inside:avoid;border-bottom:1px solid #e5e7eb !important;background:#fff !important}
  .legal-card .lang-am{display:none}
  a{color:#000 !important;text-decoration:none}
}

/* ===== Cookie banner ===== */
#cookie-banner{position:fixed;left:50%;transform:translate(-50%, 120%);bottom:1rem;width:min(720px,calc(100% - 2rem));background:#0f172a;color:#fff;border-radius:1rem;padding:1rem 1.25rem;box-shadow:0 25px 50px -12px rgba(0,0,0,.45);z-index:9000;transition:transform .45s cubic-bezier(.23,1.4,.32,1)}
#cookie-banner.is-show{transform:translate(-50%, 0)}
#cookie-banner.pos-top{bottom:auto;top:1rem;transform:translate(-50%, -120%)}
#cookie-banner.pos-top.is-show{transform:translate(-50%, 0)}
#cookie-banner .cb-row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
#cookie-banner .cb-emoji{font-size:1.75rem;flex-shrink:0}
#cookie-banner .cb-text{flex:1;min-width:240px;font-size:.85rem;line-height:1.5}
#cookie-banner .cb-text a{color:#86efac;text-decoration:underline}
#cookie-banner .cb-actions{display:flex;gap:.5rem;flex-wrap:wrap}
#cookie-banner button{border:0;cursor:pointer;font-weight:700;font-size:.85rem;padding:.6rem 1rem;border-radius:.6rem}
#cookie-banner .cb-accept{background:#16a34a;color:#fff}
#cookie-banner .cb-accept:hover{background:#15803d}
#cookie-banner .cb-prefs{background:rgba(255,255,255,.1);color:#fff}
#cookie-banner .cb-prefs:hover{background:rgba(255,255,255,.2)}

#cookie-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.55);z-index:9100;padding:1rem}
#cookie-modal.is-show{display:flex}
#cookie-modal .cm-card{background:#fff;color:#0f172a;border-radius:1rem;max-width:520px;width:100%;padding:1.5rem;box-shadow:0 25px 50px -12px rgba(0,0,0,.45)}
#cookie-modal h3{font-weight:800;font-size:1.15rem;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}
#cookie-modal .cm-pref{display:flex;align-items:flex-start;gap:.75rem;padding:.85rem;border:1px solid #e5e7eb;border-radius:.6rem;margin-bottom:.5rem}
#cookie-modal .cm-pref input{margin-top:.25rem}
#cookie-modal .cm-pref strong{display:block;margin-bottom:.15rem;font-size:.9rem}
#cookie-modal .cm-pref small{color:#64748b;font-size:.78rem;line-height:1.45}
#cookie-modal .cm-pref.is-locked{background:#f8fafc}
#cookie-modal .cm-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}
#cookie-modal button{border:0;cursor:pointer;font-weight:700;padding:.6rem 1.1rem;border-radius:.6rem;font-size:.85rem}
#cookie-modal .cm-save{background:#16a34a;color:#fff}
#cookie-modal .cm-save:hover{background:#15803d}
#cookie-modal .cm-cancel{background:#e2e8f0;color:#0f172a}