/* ============================================================
   LEGAL / POLICY PAGES — SCOPED STYLES (assets/css/legal.css)
   Design tokens (--ink, --ivory, --marigold, --gold, --maroon, etc.),
   .container, .section-pad, .btn, .eyebrow and header/ticker/footer
   rules already live in main.css and are enqueued site-wide.
   This file loads only on pages using the "Legal Page" template
   (page-legal.php), via wp_enqueue_style('adharva-legal', ...) in
   functions.php — mirrors how faq.css / collections.css load.

   Kept intentionally simple: one readable column, no sidebar/TOC,
   no sticky elements that can clash with the site's floating
   WhatsApp/help buttons on small screens.
   ============================================================ */

/* ── Breadcrumb (shared look with the FAQ page) ── */
.breadcrumb-bar{padding:14px 0;margin-top:var(--offset-top);background:var(--ivory-deep);border-bottom:1px solid rgba(26,20,16,0.06);overflow:hidden;}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:0.78rem;color:var(--ink-soft);flex-wrap:wrap;row-gap:4px;min-width:0;}
.breadcrumb a{color:var(--ink-soft);transition:color 0.25s var(--ease);flex-shrink:0;}
.breadcrumb a:hover{color:var(--marigold-deep);}
.breadcrumb span[aria-current]{color:var(--marigold-deep);font-weight:600;overflow-wrap:anywhere;min-width:0;}
.breadcrumb svg{width:12px;height:12px;flex-shrink:0;opacity:0.5;}

/* ── Hero ── */
.legal-hero{position:relative;padding:44px 0 34px;text-align:center;overflow:hidden;background:
    radial-gradient(ellipse 900px 420px at 50% -20%,rgba(232,116,12,0.10),transparent 62%),
    var(--ivory);
  border-bottom:1px solid rgba(26,20,16,0.06);}
.legal-hero-inner{display:flex;flex-direction:column;align-items:center;min-width:0;}
.legal-hero-inner .eyebrow{justify-content:center;flex-wrap:wrap;row-gap:6px;text-align:center;}
.legal-hero h1{font-size:clamp(1.5rem,7vw,2.5rem);color:var(--ink);margin-top:8px;max-width:22ch;overflow-wrap:anywhere;}
.legal-updated{margin-top:10px;font-size:0.82rem;color:var(--ink-soft);font-style:italic;padding:0 8px;}

/* ── Single-column content wrapper ──
   width:100% + min-width:0 on both levels is what actually stops a flex
   child from refusing to shrink below its content's natural width — that
   was the root cause of rows overflowing past the viewport edge on phones
   (the callout's "Email:" / "GSTIN:" rows in particular). overflow-x is a
   second belt-and-suspenders guard: if a Gutenberg block ever injects
   something un-wrappable (a raw long URL, an unbroken token) it scrolls
   inside the column instead of blowing out the whole page. */
.legal-wrap{display:flex;justify-content:center;padding-top:36px;padding-bottom:56px;width:100%;overflow-x:hidden;}
.legal-content{width:100%;max-width:760px;min-width:0;font-size:0.98rem;line-height:1.8;color:var(--ink-soft);overflow-wrap:anywhere;}

/* ── Content typography (targets core Gutenberg block output) ── */
.legal-content > *:first-child{margin-top:0;}
.legal-content h2{font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:600;color:var(--ink);margin:38px 0 12px;overflow-wrap:anywhere;}
.legal-content h2:first-of-type{margin-top:0;}
.legal-content h3{font-family:'Cormorant Garamond',serif;font-size:1.22rem;font-weight:600;color:var(--ink);margin:24px 0 10px;overflow-wrap:anywhere;}
.legal-content p{margin-bottom:14px;word-wrap:break-word;overflow-wrap:anywhere;}
.legal-content strong{color:var(--ink);font-weight:600;}
.legal-content a{color:var(--marigold-deep);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere;word-break:break-word;}
.legal-content ul, .legal-content ol{margin:0 0 16px 22px;}
.legal-content li{margin-bottom:8px;overflow-wrap:anywhere;}
.legal-content ul li{list-style:disc;}
.legal-content ol li{list-style:decimal;}
.legal-content hr{border:none;border-top:1px solid rgba(26,20,16,0.1);margin:32px 0;}
.legal-content blockquote{border-left:3px solid var(--marigold);padding:4px 0 4px 18px;margin:0 0 18px;color:var(--ink-soft);font-style:italic;overflow-wrap:anywhere;}

/* Tables: allow horizontal scroll on narrow screens instead of
   squeezing/breaking the layout, so nothing overflows the viewport. */
.legal-content .wp-block-table{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 22px;}
.legal-content table{width:100%;min-width:420px;border-collapse:collapse;font-size:0.9rem;}
.legal-content table th, .legal-content table td{text-align:left;padding:10px 14px;border:1px solid rgba(26,20,16,0.1);overflow-wrap:anywhere;}
.legal-content table th{background:var(--ivory-deep);color:var(--ink);font-weight:600;white-space:nowrap;}

/* Callout box used for the business-details summary at the top of each
   policy (legal entity, address, GSTIN, grievance contact, etc.).
   width:100% + box-sizing:border-box (inherited from the global reset)
   keeps the box itself inside .legal-content at every width; overflow-wrap
   on every row is what stops a long value (email, GSTIN placeholder,
   address) from pushing past the box's right edge on narrow phones. */
.legal-callout{width:100%;background:var(--ivory-deep);border:1px solid rgba(201,160,78,0.35);border-radius:14px;padding:20px 22px;margin:0 0 30px;overflow-wrap:anywhere;}
.legal-callout p{margin-bottom:8px;font-size:0.9rem;word-wrap:break-word;overflow-wrap:anywhere;display:flex;flex-wrap:wrap;column-gap:6px;}
.legal-callout p:last-child{margin-bottom:0;}
.legal-callout strong{color:var(--maroon-deep);flex-shrink:0;}

/* Placeholder marker — flags business-specific details (GSTIN, dates,
   grievance officer, etc.) that the store owner must fill in/confirm
   before go-live. overflow-wrap + min-width:0 stop this inline marker
   from being the thing that forces the callout row wider than the screen. */
.legal-todo{background:rgba(232,116,12,0.12);border-bottom:1.5px dashed var(--marigold-deep);padding:0 3px;border-radius:3px;color:var(--maroon-deep);font-weight:600;white-space:normal;overflow-wrap:anywhere;min-width:0;}

/* Inline "questions?" WhatsApp prompt at the end of the page — a single,
   ordinary, in-flow element. It never floats or overlaps the site's
   existing sticky WhatsApp/help buttons in the corner. */
.legal-help{margin-top:40px;padding-top:28px;border-top:1px solid rgba(26,20,16,0.1);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  /* Clears the site's fixed sticky-WhatsApp/chat launcher (bottom-right,
     ~58px + 22px offset) so the CTA row is never the thing sitting behind
     those buttons at the bottom of the page on mobile. */
  margin-bottom:max(0px, env(safe-area-inset-bottom));}
.legal-help p{margin:0;font-size:0.92rem;color:var(--ink-soft);overflow-wrap:anywhere;}
.legal-help-cta{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:30px;background:linear-gradient(135deg,var(--marigold),var(--marigold-deep));color:var(--white)!important;font-size:0.82rem;font-weight:600;white-space:nowrap;box-shadow:0 8px 20px -8px rgba(232,116,12,0.5);text-decoration:none!important;flex-shrink:0;}

@media print{
  .breadcrumb-bar, header, .rate-ticker, footer, .sticky-wa, .sticky-help, .help-teaser, .help-panel, .legal-help{display:none!important;}
  body{background:#fff;}
}

/* ============================================================
   RESPONSIVE HARDENING — legal pages
   The legal template sits inside the shared .container.  Keep its
   width/padding explicit here so the content can never become wider
   than the viewport on phones/tablets.
   ============================================================ */
.legal-wrap.container {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 24px;
  box-sizing: border-box;
}
.legal-wrap .legal-content {
  flex: 0 1 760px;
  width: 100%;
  max-width: 760px;
  min-width: 0;
  margin-inline: auto;
  box-sizing: border-box;
}
.legal-content > *,
.legal-content .wp-block-group,
.legal-content .wp-block-columns,
.legal-content .wp-block-column,
.legal-content .wp-block-media-text,
.legal-content .wp-block-cover,
.legal-content .wp-block-embed,
.legal-content .wp-block-image {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.legal-content img,
.legal-content video,
.legal-content iframe,
.legal-content embed,
.legal-content object {
  max-width: 100%;
  height: auto;
}
.legal-content iframe { width: 100%; }
.legal-content pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre;
  -webkit-overflow-scrolling: touch;
}
.legal-content code { overflow-wrap: anywhere; word-break: break-word; }
.legal-content .wp-block-buttons { flex-wrap: wrap; }
.legal-content .wp-block-button,
.legal-content .wp-block-button__link { max-width: 100%; }
.legal-content .wp-block-button__link { white-space: normal; overflow-wrap: anywhere; }

@media (max-width: 768px) {
  .breadcrumb-bar { padding: 12px 0; }
  .breadcrumb { font-size: 0.76rem; }

  .legal-hero { padding: 32px 0 24px; }
  .legal-hero h1 { font-size: clamp(1.7rem, 7.5vw, 2.25rem); max-width: 100%; }
  .legal-updated { font-size: 0.8rem; }

  .legal-wrap.container {
    padding-inline: 20px;
    padding-top: 30px;
    padding-bottom: 110px;
  }
  .legal-wrap .legal-content {
    max-width: 820px;
    font-size: 0.95rem;
    line-height: 1.75;
    padding: 0;
  }
  .legal-content h2 { font-size: 1.5rem; margin-top: 30px; }
  .legal-content h3 { font-size: 1.15rem; }
  .legal-callout { padding: 18px; border-radius: 13px; }
  .legal-callout p { font-size: 0.88rem; }
  .legal-help { align-items: flex-start; }
}

@media (max-width: 600px) {
  .legal-wrap.container { padding-inline: 16px; }
  .legal-content { font-size: 0.93rem; }

  /* On small screens labels and values stack instead of fighting for
     horizontal space inside the business-details callout. */
  .legal-callout p {
    display: block;
    margin-bottom: 12px;
  }
  .legal-callout strong {
    display: block;
    margin-bottom: 2px;
  }
  .legal-callout .legal-todo { display: inline; }

  .legal-content ul,
  .legal-content ol { margin-left: 20px; }
  .legal-content blockquote { padding-left: 14px; }

  .legal-content .wp-block-table { margin-right: 0; }
  .legal-content table { min-width: 0; font-size: 0.84rem; }
  .legal-content table th,
  .legal-content table td { padding: 8px 10px; }

  .legal-help { flex-direction: column; gap: 12px; }
  .legal-help-cta { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .breadcrumb-bar { padding: 10px 0; }
  .breadcrumb { font-size: 0.7rem; gap: 6px; }
  .breadcrumb svg { width: 10px; height: 10px; }

  .legal-hero { padding: 28px 0 20px; }
  .legal-hero-inner .eyebrow { font-size: 0.65rem; letter-spacing: 0.16em; }
  .legal-hero h1 { font-size: 1.65rem; line-height: 1.15; }
  .legal-updated { font-size: 0.74rem; padding-inline: 0; }

  .legal-wrap.container {
    padding-inline: 14px;
    padding-top: 24px;
    padding-bottom: 120px;
  }
  .legal-wrap .legal-content {
    font-size: 0.9rem;
    line-height: 1.72;
  }
  .legal-content h2 { font-size: 1.32rem; margin: 26px 0 9px; }
  .legal-content h3 { font-size: 1.08rem; margin: 20px 0 8px; }
  .legal-content p { margin-bottom: 12px; }
  .legal-callout { padding: 14px; border-radius: 11px; }
  .legal-callout p { font-size: 0.82rem; }
}

@media (max-width: 360px) {
  .legal-wrap.container { padding-inline: 12px; }
  .legal-wrap .legal-content { font-size: 0.86rem; }
  .legal-hero h1 { font-size: 1.48rem; }
  .legal-callout { padding: 12px; }
  .legal-callout p { font-size: 0.78rem; }
  .legal-content table { font-size: 0.78rem; }
}

@media (prefers-reduced-motion: reduce) {
  .legal-content * { scroll-behavior: auto !important; }
}