/* dpo-clause6.css
   Design-system styling for the DPDP Clause 6 guide (post 1761).
   Loaded ONLY on this post via the dpo-clause6 sandbox plugin, alongside
   services.css (tokens, header, footer, buttons, sticky-cta) + meganav.css/js.
   Bespoke .c6-* classes are styled here; tokens come from services.css :root. */

/* ---------- layout ---------- */
.c6-wrap{ padding:34px 0 8px; }
.c6-crumbs{ display:flex; flex-wrap:wrap; gap:.4em; align-items:center;
  font-family:'Inter',sans-serif; font-size:.85rem; color:var(--muted); margin:0 0 22px; }
.c6-crumbs a{ color:var(--muted); text-decoration:none; }
.c6-crumbs a:hover{ color:var(--accent); }
.c6-crumbs .sep{ color:var(--line); }

.c6-layout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:52px; align-items:start; }
.c6-main{ min-width:0; }
.c6-side{ min-width:0; }
.c6-sticky{ position:sticky; top:92px; display:grid; gap:16px; }
@media (max-width:980px){
  .c6-layout{ grid-template-columns:1fr; gap:0; }
  .c6-side{ margin-top:8px; }
  .c6-sticky{ position:static; }
}

/* ---------- article prose ---------- */
.c6-main{ font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--slate); font-size:1.05rem; line-height:1.78; }
.c6-main .eyebrow{ display:inline-block; font-family:'Inter',sans-serif; font-weight:700;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
  margin:0 0 .5em; }
.c6-main h1{ font-family:'Source Serif 4',Georgia,'Times New Roman',serif;
  color:var(--ink); font-weight:700; letter-spacing:-.015em; line-height:1.15;
  font-size:clamp(1.85rem,1.3rem + 2.2vw,2.55rem); margin:0 0 .35em; }
.c6-meta{ font-family:'Inter',sans-serif; font-size:.9rem; color:var(--muted); margin:0 0 1.4em; }
.c6-main .lede{ font-size:1.18rem; line-height:1.65; color:var(--ink-2); margin:0 0 1.4em; }
.c6-main h2{ font-family:'Source Serif 4',Georgia,'Times New Roman',serif;
  color:var(--ink); font-weight:700; letter-spacing:-.01em; line-height:1.24;
  font-size:clamp(1.42rem,1.05rem + 1.3vw,1.72rem);
  margin:2.4em 0 .55em; padding-top:1.25em; border-top:1px solid var(--line); scroll-margin-top:92px; }
.c6-main h2::after{ content:""; display:block; width:46px; height:3px; margin-top:.55em;
  background:var(--saffron); border-radius:3px; }
.c6-main h3{ font-family:'Inter',sans-serif; color:var(--accent); font-weight:700;
  font-size:1.12rem; line-height:1.35; margin:1.7em 0 .5em; }
.c6-main p{ margin:0 0 1.15em; }
.c6-main strong{ color:var(--ink); }
.c6-main a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px;
  text-decoration-thickness:1px; }
.c6-main a:hover{ color:var(--gold); }
.c6-main ul,.c6-main ol{ margin:0 0 1.2em; padding-left:1.35em; }
.c6-main li{ margin:.4em 0; }
.c6-main ul li::marker{ color:var(--saffron); }
.c6-main ol li::marker{ color:var(--accent); font-weight:600; }

/* ---------- short-answer block ---------- */
.c6-answer{ background:var(--accent-soft); border:1px solid #F4E4CF;
  border-left:4px solid var(--saffron); border-radius:0 var(--radius) var(--radius) 0;
  padding:16px 20px; margin:0 0 1.6em; }
.c6-answer p{ margin:0; color:var(--ink-2); }

/* ---------- tables ---------- */
.c6-table{ margin:1.5em 0; overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); }
.c6-table table{ width:100%; border-collapse:separate; border-spacing:0;
  font-size:.96rem; background:#fff; min-width:520px; }
.c6-table th{ background:var(--accent); color:#fff; font-family:'Inter',sans-serif;
  font-weight:600; text-align:left; padding:.72rem .9rem; vertical-align:top; letter-spacing:.005em; }
.c6-table td{ padding:.66rem .9rem; border-top:1px solid var(--line); color:var(--slate); vertical-align:top; }
.c6-table tbody tr:nth-child(even) td{ background:var(--paper-2); }
.c6-table td strong{ color:var(--ink); }

/* ---------- FAQ ---------- */
.c6-faq{ margin:1em 0 0; display:grid; gap:10px; }
.c6-faq details{ border:1px solid var(--line); border-radius:12px; background:#fff; padding:2px 16px; }
.c6-faq summary{ cursor:pointer; list-style:none; font-family:'Inter',sans-serif;
  font-weight:600; color:var(--ink); padding:14px 24px 14px 0; position:relative; }
.c6-faq summary::-webkit-details-marker{ display:none; }
.c6-faq summary::after{ content:"+"; position:absolute; right:2px; top:50%;
  transform:translateY(-50%); color:var(--accent); font-size:1.3rem; font-weight:400; line-height:1; }
.c6-faq details[open] summary::after{ content:"\2013"; }
.c6-faq details[open] summary{ border-bottom:1px solid var(--line); }
.c6-faq p{ margin:12px 0 14px; color:var(--slate); }

/* ---------- in-article end CTA ---------- */
.c6-cta{ margin:2.4em 0 .5em; background:var(--accent); color:#fff;
  border-radius:var(--radius); padding:26px 28px; }
.c6-cta h3{ font-family:'Source Serif 4',Georgia,serif; color:#fff; margin:0 0 .35em; font-size:1.3rem; }
.c6-cta p{ color:#dfe4f5; margin:0 0 1.1em; }
.c6-cta-row{ display:flex; flex-wrap:wrap; gap:12px; }
.c6-cta .btn--primary{ background:var(--saffron); border-color:var(--saffron); color:var(--ink); }
.c6-cta .btn--primary:hover{ background:#ffb055; border-color:#ffb055; }
.c6-cta .btn--ghost{ background:transparent; border:1px solid rgba(255,255,255,.5); color:#fff; }
.c6-cta .btn--ghost:hover{ background:rgba(255,255,255,.12); }

/* ---------- Related reading, at the end of the article ---------- */
.c6-related-block{ margin:2.8em 0 .3em; padding-top:1.7em; border-top:1px solid var(--line); }
.c6-related-h{ font-family:'Source Serif 4',Georgia,'Times New Roman',serif; color:var(--ink);
  font-weight:700; letter-spacing:-.01em; font-size:1.3rem; margin:0 0 .85em; padding-top:0; border-top:0; }
.c6-related-h::after{ display:none; }
.c6-related-block .c6-related{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.c6-related-block .c6-related a{ display:block; padding:12px 15px; border:1px solid var(--line);
  border-radius:12px; background:#fff; font-family:'Inter',sans-serif; font-size:.95rem;
  font-weight:500; color:var(--accent); text-decoration:none; transition:border-color .15s ease,color .15s ease; }
.c6-related-block .c6-related a:hover{ border-color:var(--accent); color:var(--gold); }
@media (max-width:560px){ .c6-related-block .c6-related{ grid-template-columns:1fr; } }

/* ---------- sidebar cards ---------- */
.c6-card{ border:1px solid var(--line); border-radius:var(--radius); background:#fff; padding:18px; }
.c6-card .c6-h{ display:block; font-family:'Inter',sans-serif; font-weight:700;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 10px; }

/* collapsible "On this page" TOC (closed by default) */
.c6-card.c6-toc-card{ padding:0; }
.c6-card.c6-toc-card > summary{ display:flex; align-items:center; justify-content:space-between;
  margin:0; padding:16px 18px; cursor:pointer; list-style:none; }
.c6-card.c6-toc-card > summary::-webkit-details-marker{ display:none; }
.c6-card.c6-toc-card > summary::after{ content:""; width:8px; height:8px; flex:0 0 auto; margin-left:10px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(45deg); transition:transform .2s ease; }
.c6-card.c6-toc-card[open] > summary::after{ transform:rotate(-135deg); }
.c6-card.c6-toc-card .c6-toc{ padding:2px 18px 16px; }
.c6-toc{ display:grid; }
.c6-toc a{ display:block; padding:8px 0; border-top:1px solid var(--line);
  font-family:'Inter',sans-serif; font-size:.92rem; color:var(--ink-2); text-decoration:none; }
.c6-toc a:first-child{ border-top:0; }
.c6-toc a:hover{ color:var(--accent); }

/* CTA sidebar card (dark) */
.c6-card--cta{ background:var(--accent); border-color:var(--navy-deep); color:#fff; }
.c6-card--cta .c6-kicker{ display:block; font-family:'Inter',sans-serif; font-weight:700;
  font-size:.95rem; color:#fff; margin:0 0 6px; }
.c6-card--cta p{ font-family:'Inter',sans-serif; font-size:.9rem; color:#dfe4f5; margin:0 0 14px; line-height:1.55; }
.c6-card--cta .btn{ display:block; text-align:center; margin:8px 0 0; }
.c6-card--cta .btn--primary{ background:var(--saffron); border-color:var(--saffron); color:var(--ink); }
.c6-card--cta .btn--primary:hover{ background:#ffb055; border-color:#ffb055; }
.c6-card--cta .btn--ghost{ background:transparent; border:1px solid rgba(255,255,255,.5); color:#fff; }
.c6-card--cta .btn--ghost:hover{ background:rgba(255,255,255,.12); }

/* "Follow DPOIndia in Google Search" card */
.c6-follow .c6-h{ margin-bottom:12px; }
.c6-gbtn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; width:100%;
  padding:10px 15px; border-radius:100px; background:#000; color:#fff !important;
  font-family:'Inter',sans-serif; font-size:.9rem; font-weight:500; line-height:1.15;
  text-decoration:none !important; border:1px solid rgba(0,0,0,.14);
  box-shadow:0 1px 3px rgba(0,0,0,.22); transition:background .15s ease,box-shadow .15s ease; }
.c6-gbtn svg{ flex:0 0 auto; }
.c6-gbtn:hover{ background:#151515; color:#fff !important; box-shadow:0 4px 12px rgba(0,0,0,.26); }
.c6-gbtn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* hide the site-wide GPS bar on this page (also suppressed server-side) */
.dpo-gps-bar{ display:none !important; }

/* ---------- fixes: sticky sidebar + CTA button contrast ---------- */
/* give the sidebar column full row height so the sticky stack can travel */
.c6-side{ align-self:stretch; }

/* CTA buttons on the navy cards: force fill + white text (beats services.css) */
.c6-card.c6-card--cta .btn,
.c6-cta .btn{ color:#fff !important; }
.c6-card.c6-card--cta .btn--primary,
.c6-cta .btn--primary{ background:var(--saffron) !important; border-color:var(--saffron) !important;
  color:var(--ink) !important; font-weight:700; }
.c6-card.c6-card--cta .btn--primary:hover,
.c6-cta .btn--primary:hover{ background:#f28a1e !important; border-color:#f28a1e !important; }
.c6-card.c6-card--cta .btn--ghost,
.c6-cta .btn--ghost{ background:transparent !important;
  border:1px solid rgba(255,255,255,.65) !important; color:#fff !important; }
.c6-card.c6-card--cta .btn--ghost:hover,
.c6-cta .btn--ghost:hover{ background:rgba(255,255,255,.14) !important; }