/* ============================================================
   PRIVACY-POLICY.CSS — page-specific styles for privacy-policy.php:
   the hero banner image, the sticky table-of-contents layout, and
   the 3-column override for the Contact section's .bento grid.
   The accordion itself reuses .faq-list/.faq-item/.faq-body as-is
   from components.css (no changes needed there).
   ============================================================ */
:root{
  --hero-bg-image: url('../images/banners/privacy-policy-banner.jpg');
}

/* ===== STICKY TABLE OF CONTENTS + ACCORDION LAYOUT ===== */
/* Keeps a section's heading clear of the fixed header when a TOC link
   scrolls it into view. Scoped to this page only — does not touch the
   shared .faq-item rule used elsewhere (FAQ on direct-plus.php etc). */
.legal-content .faq-item{scroll-margin-top:calc(var(--header-h) + 16px);}
.legal-layout{display:grid; grid-template-columns:240px 1fr; gap:48px; align-items:start;}
.toc{
  position:sticky; top:calc(var(--header-h) + 24px);
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px;
}
.toc h4{font-family:var(--sans); font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--gold); margin-bottom:14px;}
.toc ul{display:flex; flex-direction:column; gap:11px;}
.toc a{font-size:13.5px; font-weight:600; color:var(--gray); transition:color .2s; display:block;}
.toc a:hover{color:var(--teal);}
.legal-content{min-width:0;}

@media(max-width:900px){
  .legal-layout{grid-template-columns:1fr;}
  .toc{position:static; margin-bottom:28px;}
  .toc ul{flex-direction:row; flex-wrap:wrap; gap:10px;}
  .toc a{padding:6px 12px; background:var(--ivory); border-radius:999px;}
}

/* ===== CONTACT SECTION — 3-column .bento (instead of the default 4) ===== */
#legal-contact .bento{grid-template-columns:repeat(3,1fr);}
@media(max-width:900px){#legal-contact .bento{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){#legal-contact .bento{grid-template-columns:1fr;}}