/*
Theme Name: LegalPower AI
Theme URI: https://legalpower.ai/
Author: DigitalBeverly
Author URI: https://digitalbeverly.com/
Description: LegalPower AI custom WordPress theme with ACF support and modular sections.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: legalpowerai
*/

/* ========= design tokens ========= */
:root{
  --ink:#0b0b0c;
  --ink-2:#2b2d31;
  --muted:#7b7f86;
  --bg:#f6f7f9;
  --card:#ffffff;
  --accent:#d21e2b;
  --brand:#0a58ff;
  --ring:0 10px 40px rgba(0,0,0,.12);
  --ring-strong:0 18px 60px rgba(0,0,0,.16);
  --brand-rgb:10,88,255;
}

/* ========= reset & layout (sticky footer-safe) ========= */
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

body{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  background:radial-gradient(1200px 600px at 120% -20%, #fff 0, #f9fafb 28%, #f3f5f8 60%, #eef1f5 100%);
  color:var(--ink);
  font:16px/1.6 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
}

/* Main page wrapper (opened in header.php) grows to push footer down */
body > .wrap{
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
}

/* Footer stays at bottom when content is short */
footer{flex-shrink:0}

body::after{
  content:"";
  position:fixed; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Ccircle cx='10' cy='8' r='0.8' fill='%23000000' fill-opacity='.06'/%3E%3Ccircle cx='74' cy='54' r='0.7' fill='%23000000' fill-opacity='.05'/%3E%3Ccircle cx='32' cy='98' r='0.6' fill='%23000000' fill-opacity='.05'/%3E%3C/svg%3E");
  opacity:.22; mix-blend-mode:multiply;
}
.wrap{max-width:1480px;margin:0 auto;padding:24px;}

/* ========= header / nav (sticky) ========= */
.nav{
  position:sticky;
  top:0;
  z-index:1000;
  backdrop-filter:saturate(120%) blur(6px);
  background:rgba(255,255,255,.98);
  border-bottom:1px solid rgba(0,0,0,.06);
}

/* Header layout: 3 columns (brand | center menu | login) */
.nav-inner{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:18px;
  min-height:72px;
}

.brand{font-weight:900;letter-spacing:.2px;display:flex;align-items:center;justify-self:start}
.brand i{color:var(--accent);font-style:normal}

/* ===== MENU: WP menu normalization ===== */
.links{
  display:flex;
  gap:18px;
  align-items:center;
  justify-self:center;
  justify-content:center;
  width:fit-content;
  position:relative;
}
.links ul{
  display:flex; gap:18px; align-items:center;
  padding:0; margin:0; list-style:none; background:none; border:none;
}
.links > ul{ width:100%; }
.links li{ display:flex; align-items:center; padding:0; margin:0; position:relative; }
.links li.menu-item-has-children{ position:relative; }
.links li .sub-menu{
  display:none; position:absolute; left:0; top:100%;
  background:#fff; border:1px solid #eee; box-shadow:var(--ring);
  border-radius:8px; min-width:180px; z-index:1000;
  flex-direction:column; padding:10px 0; margin:0;
}
.links li:hover > .sub-menu,
.links li:focus-within > .sub-menu{ display:flex; }
.links .sub-menu li{ padding:0; margin:0; }
.links .sub-menu a{
  padding:8px 22px; font-size:15px; color:var(--ink-2);
  background:none; border:none; height:auto;
}
.links .sub-menu a:hover{ background:var(--bg); color:var(--brand); }

/* Link states */
.links a{
  display:inline-flex; align-items:center; height:40px; padding:0 2px;
  border-bottom:2px solid transparent; transition:color .2s, border-color .2s;
}
.links a:hover, .links a:focus{ color:var(--brand); border-color:var(--brand); }
.links a[aria-current="page"]{ color:var(--brand); border-color:var(--brand); }

/* CTA */
.links .cta, .cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:12px; background:var(--ink);
  color:#fff; font-weight:600; box-shadow:var(--ring);
  transition:transform .15s, box-shadow .15s, background .15s;
}
.links .cta.outline, .cta.outline{
  background:#fff; color:var(--brand); border:2px solid var(--brand); padding:15px;
}
.links .cta.outline:hover, .cta.outline:hover{
  color:#fff; background:var(--brand); border-color:var(--brand);
}

/* Right login */
.header-login{ justify-self:end; }
.header-login .cta{
  background:#0a58ff; color:#fff; padding:7px 25px; font-size:15px;
  border-radius:10px; box-shadow:var(--ring);
  transition:background .15s, transform .15s, box-shadow .15s;
}
.header-login .cta:hover{ background:var(--accent); transform:translateY(-1px); }

/* ===== Mobile (<=980px) ===== */
.menu-toggle{ display:none; background:none; border:none; font-size:2rem; cursor:pointer; margin-left:12px; }

@media (max-width:980px){
  .menu-toggle{ display:inline-flex; align-items:center; justify-self:start; }

  .links{
    position:absolute; left:0; top:72px; width:100%;
    display:none; flex-direction:column; align-items:stretch;
    background:#fff; z-index:100; border-bottom:1px solid #eee; padding:8px 0; gap:0;
  }
  .links.active{ display:flex; }
  .links a{ width:100%; padding:10px 15px; height:auto; box-sizing:border-box; }

  .links, .links ul{ flex-direction:column; }
  .links .sub-menu{ position:static; box-shadow:none; border:none; min-width:0; padding:0; }

  .brand{ justify-self:start; }
  .header-login{ justify-self:end; }
}

/* ========= hero ========= */
.hero{position:relative;margin-top:12px;background:linear-gradient(180deg,#fff 0,#fff 60%,#fafbfc 100%);border-radius:24px;overflow:hidden;box-shadow:var(--ring);}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center;padding:56px 36px}
.kicker{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
h1{font-size:clamp(34px,5vw,56px);line-height:1.05;margin:.2em 0 .1em;letter-spacing:-.02em}
.sub{font-size:19px;color:var(--ink-2);max-width:44ch}
.hero-actions{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}
.hero-img{border-radius:16px;background:#fff;border:1px solid #eee;box-shadow:var(--ring);transform:translateY(0);transition:transform .5s ease;}
.hero-img:hover{transform:translateY(-4px)}
.hero::before,
.hero::after{content:"";position:absolute;z-index:2;width:0;height:0;border-style:solid;filter:drop-shadow(0 6px 14px rgba(0,0,0,.12));}
.hero::before{top:0;left:0;border-width:0 0 54px 54px;border-color:transparent transparent var(--accent) transparent}
.hero::after{right:0;bottom:0;border-width:72px 72px 0 0;border-color:#ffffff transparent transparent transparent;}

/* ========= sections ========= */
section{margin-top:26px}
.card{background:var(--card);border-radius:20px;padding:36px;box-shadow:var(--ring);position:relative;overflow:hidden;border:1px solid rgba(10,88,255,.08);}
.stripe{width:72px;height:4px;background:linear-gradient(90deg,var(--accent),var(--brand));border-radius:3px;margin:10px 0 18px}
h2{font-size:clamp(22px,3vw,34px);margin:0;letter-spacing:-.01em}
.lead{color:var(--ink-2);max-width:68ch;margin:8px 0 18px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
.bullets{list-style:none;padding:0;margin:0}
.bullets li{position:relative;padding-left:28px;margin:10px 0;color:var(--ink-2)}
.bullets li::before{content:"➤";position:absolute;left:0;top:0;color:var(--accent);font-weight:900}
.tile{background:#fff;border:1px solid transparent;border-radius:14px;padding:18px 16px;transition:transform .25s ease, box-shadow .25s ease;background:linear-gradient(#fff,#fff) padding-box, linear-gradient(180deg, rgba(10,88,255,.22), rgba(210,30,43,.22)) border-box;}
.tile:hover{transform:translateY(-4px);box-shadow:var(--ring-strong)}
.tile h3{margin:0 0 6px;font-size:18px}
.angled::after{content:"";position:absolute;right:0;top:0;width:0;height:0;border-style:solid;border-width:0 42px 42px 0;border-color:transparent var(--brand) transparent transparent;opacity:.95;}
.hr-hairline{height:1px;width:100%;background:linear-gradient(90deg,transparent,var(--brand),transparent);opacity:.35;margin:16px 0}
.stat{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;background:#eef4ff;color:#0a58ff;border:1px solid rgba(10,88,255,.25);font-weight:800;font-size:14px}
.logo-strip{opacity:.75;filter:grayscale(1);display:flex;gap:28px;flex-wrap:wrap;align-items:center}
.logo-placeholder{display:inline-flex;align-items:center;justify-content:center;width:92px;height:28px;border:1px solid #d7def8;border-radius:6px;font-size:12px;color:#6b7bd3;background:#f6f8ff}
.badges{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.badge{padding:8px 12px;border-radius:10px;background:#f6f8ff;color:#173bff;border:1px solid rgba(10,88,255,.18);font-weight:700;font-size:13px}
.quote{background:#ffffff;border-radius:14px;padding:18px;box-shadow:var(--ring);border:1px solid rgba(10,88,255,.08);font-style:italic;color:var(--ink-2)}
.quote cite{display:block;margin-top:8px;font-style:normal;font-weight:700;color:#111}
.qa{display:grid;gap:10px}
.qa .q{font-weight:800}
.qa .a{color:var(--ink-2)}
table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:14px;box-shadow:var(--ring);border:1px solid rgba(10,88,255,.08)}
th,td{padding:12px 14px;text-align:left;vertical-align:top}
thead th{background:#f6f8ff;font-weight:800;border-bottom:1px solid #e6ecff}
tbody tr:nth-child(even){background:#fafbff}

/* ========= footer ========= */
footer{color:#868b93;text-align:center;padding:32px 8px}

/* ========= accessibility & motion ========= */
a:focus-visible, button:focus-visible{outline:3px solid color-mix(in srgb, var(--brand) 70%, white); outline-offset:2px; border-radius:8px}
@media (prefers-reduced-motion:reduce){ .cta,.tile,.hero-img{transition:none !important; transform:none !important} }

/* ========= responsive ========= */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .g2{grid-template-columns:1fr}
  .g3{grid-template-columns:1fr}
}
@media (max-width:560px){
  .nav .links{display:none}
  .hero-grid{padding:28px 20px}
  .card{padding:26px}
}

/* ===== Contact Form 7 ===== */
.contact-form-card{
  background:#fff; border-radius:18px; border:1px solid #e6eaf3;
  box-shadow:0 10px 40px rgba(0,0,0,.06);
  max-width:560px; margin:32px auto; padding:28px 32px;
}
.contact-form-card .wpcf7 form,
.contact-form-card form{ display:grid; grid-template-columns:1fr; gap:14px; margin:0; }
.contact-form-card .wpcf7 p{ margin:0; padding:0; }
.contact-form-card label{
  display:block; margin:0 0 6px 2px; font-weight:600; font-size:.95rem; color:var(--ink-2); letter-spacing:.01em;
}
.contact-form-card input[type="text"],
.contact-form-card input[type="email"],
.contact-form-card input[type="tel"],
.contact-form-card input[type="url"],
.contact-form-card input[type="number"],
.contact-form-card input[type="date"],
.contact-form-card input[type="password"],
.contact-form-card select,
.contact-form-card textarea,
.contact-form-card .form-input{
  width:100%; margin:0; padding:14px 16px; border-radius:12px;
  border:1.5px solid #e3e8f1; background:#f9fafc; font-size:1rem; color:var(--ink-2);
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.contact-form-card ::placeholder{ color:#a7afbb; }
.contact-form-card input:focus,
.contact-form-card select:focus,
.contact-form-card textarea:focus{
  background:#fff; border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(0,0,0,.04), 0 0 0 4px rgba(var(--brand-rgb),.15);
  outline:none;
}
.contact-form-card textarea{ min-height:120px; resize:vertical; }

/* Submit row centering */
@supports(selector(p:has(input[type="submit"]))){
  .contact-form-card .wpcf7 p:has(input[type="submit"]){
    display:grid !important; place-items:center !important; gap:8px; position:relative;
  }
  .contact-form-card .wpcf7 p:has(input[type="submit"]) .wpcf7-spinner{ margin:0; }
}
@supports not (selector(p:has(input[type="submit"]))){
  .contact-form-card .wpcf7 p:last-child{ text-align:center; position:relative; }
  .contact-form-card .wpcf7 p:last-child .wpcf7-spinner{
    position:absolute; right:0; top:50%; transform:translateY(-50%);
  }
}
.contact-form-card input[type="submit"],
.contact-form-card .wpcf7 .wpcf7-submit,
.contact-form-card .cta{
  background:var(--brand); color:#fff; font-weight:800; border:none; border-radius:14px;
  padding:14px 34px; font-size:1.1rem; letter-spacing:.02em; cursor:pointer;
  transition:transform .18s, box-shadow .18s, background .18s;
  display:inline-flex; align-items:center; justify-content:center; margin:0;
  box-shadow:0 6px 22px rgba(10,88,255,.12);
}
.contact-form-card input[type="submit"]:hover{
  background:var(--accent); transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(210,30,43,.16);
}
.contact-form-card input[type="submit"]:active{
  transform:translateY(0); box-shadow:0 4px 14px rgba(0,0,0,.12);
}
.contact-form-card .wpcf7-not-valid{ border-color:#e03a3a !important; background:#fff7f7 !important; }
.contact-form-card .wpcf7-not-valid-tip{ color:#e03a3a; font-size:.9rem; margin:6px 2px 0; }
.wpcf7-response-output{ margin-top:12px; padding:10px 14px; border-radius:10px; font-size:.95rem; }
@media (max-width:600px){
  .contact-form-card{ padding:20px 18px; margin:20px 12px; }
  .contact-form-card .wpcf7 form{ gap:12px; }
}

/* ==== Discover In Action (wider, one-per-line) ==== */
/* The template has an inline grid definition; use !important to force single column. */
.process-cards{
  display:grid;
  grid-template-columns:1fr !important; /* enforce one-per-line */
  max-width:980px;
  margin:50px auto 0;
  gap:28px;
  padding:0 12px;
}
.process-card{
  display:flex;
  align-items:flex-start;
  gap:22px;
  padding:28px 34px;
  border-radius:16px;
  background:linear-gradient(115deg,#f8faff 65%,#eaf4ff 100%);
  box-shadow:var(--ring);
  border:1px solid rgba(10,88,255,.08);
  transition:transform .14s ease, box-shadow .14s ease;
  overflow:hidden;
}
.process-icon{
  flex:0 0 84px;
  width:84px; height:84px; border-radius:12px;
  background:var(--brand); color:#fff; display:grid; place-items:center;
  font-size:1.35rem; font-weight:900; box-shadow:0 8px 28px rgba(10,88,255,.12);
}
.process-card h3{
  margin:0 0 8px; font-size:1.18rem; font-weight:800; line-height:1.2;
}
.process-card p{
  color:var(--ink-2); font-size:1.05rem; line-height:1.6; margin:0; max-width:80ch;
}
.process-card:hover,
.process-card:focus-within{ transform:translateY(-4px); box-shadow:0 24px 68px rgba(2,15,44,.12); }
.process-card:hover .process-icon{ background:var(--accent); }
@media (max-width:720px){
  .process-cards{ gap:18px; padding:0 8px; }
  .process-card{ flex-direction:column; align-items:center; text-align:center; padding:20px; }
  .process-icon{ width:64px; height:64px; border-radius:12px; margin:0 0 10px 0; font-size:1.15rem; }
}

/* ===========================
   BLOG ARCHIVE (clean + consistent top spacing)
   =========================== */
.blog-archive{
  padding-top:72px; /* align with other pages */
  padding-bottom:44px;
}
.blog-header{ text-align:center; margin-bottom:36px; }
.blog-header h1{ font-size:2.6rem; font-weight:900; margin:0 0 8px; }
.blog-header .lead{color:var(--muted);font-size:1.2rem;margin:0;display:block;text-align:center !important;margin-left:auto;margin-right:auto;padding: 15px;}

/* Category pills */
.cat-pill{
  display:inline-block; padding:8px 12px; border:1px solid #e6e9f2; border-radius:999px;
  margin:6px; line-height:1; font-weight:600; color:var(--ink-2); background:#fff;
  transition:all .18s ease;
}
.cat-pill:hover{ border-color:var(--brand); background:#eef4ff; color:var(--brand); }
.cat-pill.is-active, .cat-pill.active{ background:var(--brand); color:#fff !important; border-color:var(--brand); }

/* Grid of posts (flex) */
.blog-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:24px; }
.blog-card{ flex:0 1 300px; max-width:100%; }

.blog-card--simple{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid rgba(10,88,255,.08); border-radius:16px;
  box-shadow:0 4px 18px rgba(10,88,255,.08);
  overflow:hidden; transition:transform .18s ease, box-shadow .18s ease;
}
.blog-card--simple:hover{ transform:translateY(-4px); box-shadow:var(--ring-strong); }

.blog-card-media{ display:block; width:100%; aspect-ratio:16/11; background:#f2f5fb; position:relative; overflow:hidden; }
.blog-card-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transform:scale(1); transition:transform .3s ease;
}
.blog-card--simple:hover .blog-card-img{ transform:scale(1.03); }

.blog-card-placeholder{
  position:absolute; inset:0; display:grid; place-items:center;
  font-weight:800; color:#9aa3b2; background:linear-gradient(135deg,#eef3ff,#f7f9ff);
}

.blog-card-title{
  margin:0; padding:12px 14px 14px; font-size:1.02rem; line-height:1.28; font-weight:700; letter-spacing:-.01em;
}
.blog-card-title a{ color:var(--ink-2); transition:color .18s ease; }
.blog-card--simple:hover .blog-card-title a{ color:var(--brand); }

/* Hide legacy bits inside simple card */
.blog-card--simple .blog-card-content,
.blog-card--simple .blog-card-meta,
.blog-card--simple .blog-card-more,
.blog-card--simple p{ display:none !important; }

/* Pagination */
.blog-pagination{ text-align:center; margin:44px 0 0; }
.blog-pagination .page-numbers{
  display:inline-block; margin:0 5px; padding:9px 15px; border-radius:7px; background:#f7f9ff; color:#7b7f86;
}
.blog-pagination .current{ background:var(--brand); color:#fff; font-weight:700; }

/* Responsive for archive */
@media (max-width:900px){
  .blog-card-title{ font-size:.98rem; padding:10px 12px 12px; }
}
@media (max-width:560px){
  .blog-header h1{ font-size:2rem; }
}

/* ===========================
   SINGLE POST
   =========================== */
.single-post-adaptive{
  display:flex; justify-content:center; width:100%;
  padding:24px; box-sizing:border-box; background:none;
}
.post-content{
  width:100%; max-width:1080px; background:linear-gradient(105deg,#fafdff 70%,#f7f8fc 100%);
  border-radius:24px; box-shadow:var(--ring-strong); padding:52px 48px 42px;
  border:1.5px solid rgba(10,88,255,.08); box-sizing:border-box; margin:0 auto;
}
.single-header{ margin-bottom:32px; }
.single-header h1{ font-size:clamp(28px,4vw,44px); margin:0 0 12px; font-weight:900; letter-spacing:-.01em; }

.single-meta{
  color:var(--muted); font-size:1.02rem; margin:0 0 16px;
  display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center;
}
.single-meta .meta-dot{ color:#b1b6ba; }
.single-meta .meta-cat{
  color:var(--brand); font-weight:700; background:#f3f7ff;
  border-radius:999px; padding:4px 10px; font-size:.92rem;
}
.single-meta .meta-cat:hover{ background:var(--brand); color:#fff; }
.single-meta .by, .single-meta .posted-by, .single-meta span[aria-label="by"]{ display:none !important; }

.single-thumb{
  position:relative; overflow:hidden; aspect-ratio:16/9;
  border-radius:18px; box-shadow:0 6px 30px rgba(10,88,255,.09); margin-top:18px; background:#eef3ff;
}
.single-thumb img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  border-radius:0; margin:0; box-shadow:none; transform:scale(1); transition:transform .35s ease;
}
.single-thumb:hover img{ transform:scale(1.02); }

.single-body{ font-size:1.18rem; line-height:1.78; color:var(--ink-2); margin:26px 0 0; }
.single-body img{
  max-width:100%; border-radius:14px; margin:22px 0; box-shadow:0 4px 20px rgba(10,88,255,.08);
}

.single-footer{
  margin-top:46px; color:var(--muted); font-size:1rem;
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:18px;
}
.single-tags .tag-label{ font-weight:700; color:var(--brand); margin-right:8px; }
.single-tags a{
  color:var(--brand); background:#f3f7ff; border-radius:8px; padding:4px 12px; margin-right:7px;
  text-decoration:none; font-weight:600; font-size:.95em;
}
.single-tags a:hover{ background:var(--brand); color:#fff; }
.single-nav{ margin-top:24px; display:flex; gap:15px; flex:1 1 100%; justify-content:flex-end; }
.single-nav .prev,.single-nav .next{ color:var(--brand); font-weight:700; font-size:1.05em; }
.single-nav .prev:hover,.single-nav .next:hover{ color:var(--accent); }

@media (max-width:1200px){
  .post-content{ max-width:min(96vw,1024px); }
}
@media (max-width:900px){
  .single-post-adaptive{ padding:12px; }
  .post-content{ padding:28px 5vw 24px; border-radius:16px; }
  .single-thumb{ aspect-ratio:16/10; border-radius:12px; }
}
@media (max-width:600px){
  .single-post-adaptive{ padding:0; }
  .post-content{ padding:14px 3.5vw 16px; border-radius:10px; }
  .single-thumb{ aspect-ratio:16/11; border-radius:10px; }
  .single-body{ font-size:1.06rem; line-height:1.72; }
}

/* ===========================
   FAQ ACCORDION
   =========================== */
.faq-wrap{ overflow:visible; }
.faq{ display:grid; gap:12px; margin-top:12px; }

.faq-item{
  border:1px solid rgba(10,88,255,.10); border-radius:14px;
  background:linear-gradient(180deg,#fff 0,#fbfcff 100%);
  box-shadow:0 6px 26px rgba(0,0,0,.06); overflow:hidden;
  transition:box-shadow .2s ease, transform .2s ease;
}
.faq-item[open]{ box-shadow:var(--ring); transform:translateY(-1px); }
.faq-item summary{
  list-style:none; cursor:pointer; position:relative; padding:16px 52px 16px 18px;
  font-weight:800; color:var(--ink); line-height:1.35;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; position:absolute; right:16px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; display:grid; place-items:center; border-radius:10px;
  background:#eef4ff; color:#0a58ff; font-weight:900; box-shadow:0 2px 8px rgba(10,88,255,.10);
  transition:background .18s, color .18s, transform .18s;
}
.faq-item[open] summary::after{ content:"–"; background:var(--brand); color:#fff; }
.faq-item summary:hover{ background:#f7f9ff; }
.faq-body{
  color:var(--ink-2); padding:0 18px 18px 18px; font-size:1.02rem; line-height:1.65;
  border-top:1px solid #edf1fa; animation:faqFade .18s ease;
}
@keyframes faqFade{ from{opacity:0; transform:translateY(-2px);} to{opacity:1; transform:translateY(0);} }

/* Related posts */
.related-posts{ margin-top:48px; }
.related-title{ font-size:1.6rem; font-weight:900; letter-spacing:-.02em; margin:0 0 14px; }
.related-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.related-card{
  display:block; border:1px solid #e6e9f2; border-radius:16px; overflow:hidden;
  background:#fff; text-decoration:none; color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow:0 1px 2px rgba(10,18,41,.05);
}
.related-card:hover{
  transform:translateY(-2px); box-shadow:0 6px 22px rgba(10,18,41,.10); border-color:#dfe5f2;
}
.related-media{ aspect-ratio:16/9; background:#f3f5fa; position:relative; overflow:hidden; }
.related-img{ width:100%; height:100%; object-fit:cover; display:block; }
.related-placeholder{ position:absolute; inset:0; display:grid; place-items:center; color:#8a94a6; font-size:.9rem; }
.related-info{ padding:14px 14px 16px; }
.related-heading{ margin:0; font-size:1.02rem; line-height:1.35; font-weight:800; color:var(--ink,#0b1221); }
.related-card:focus-visible{
  outline:3px solid color-mix(in srgb, var(--brand,#0a58ff) 70%, white); outline-offset:2px;
}