/* ==============================================================================
   LEGAL PAGES — SHARED PAGE-SPECIFIC STYLES (Layer 3)
   ==============================================================================

   This file is shared between the Privacy Policy and Terms pages. Both pages
   use the same visual treatment: TOC navigation, plain-language summary card,
   contact panel, "confirm" placeholder markers, and (for Privacy) data tables.

   WORDPRESS PLACEMENT
   -------------------
   wp-content/themes/synergy/assets/css/pages/legal.css

   ENQUEUE (in functions.php) — load on both legal pages:

       if ( is_page( array( 'privacy-policy', 'terms' ) ) ) {
           wp_enqueue_style(
               'synergy-legal',
               get_template_directory_uri() . '/assets/css/pages/legal.css',
               array( 'synergy-foundation' ),
               filemtime( get_template_directory() . '/assets/css/pages/legal.css' )
           );
       }

   WHAT WAS DROPPED FROM THE ORIGINALS
   -----------------------------------
   The Privacy and Terms pages originally had a "mini" header (.legal-header
   with just logo + Back to home link) and a "mini" footer (.legal-footer
   with a single line + 3 links). Both of these have been replaced by the
   master site header and master site footer — same navigation, same
   accreditations, same Areas Served block as every other page.

   That removal stripped these CSS rules:
     - .legal-header, .legal-header .container, .brand, .brand span,
       .header-link
     - .legal-footer, .legal-footer .container
     - Their @media print overrides

   The .container rule was also dropped (foundation provides one). Foundation's
   container is wider (1180px max) than the legal container was (880px max).
   Legal pages will now use the full foundation container — but the actual
   text columns inside .legal-body are visually narrow anyway (driven by
   .toc and section content), so this won't make pages feel too wide.

   CI COMPLIANCE
   -------------
   All colours updated to CI specification on 12 May 2026.
   Uses --brand-primary, --brand-primary-dark from foundation.
   Uses --muted (CI brand grey #636466) for secondary text.

   COMPONENTS INSIDE
   -----------------
   .legal-hero        — page title + dates (above the breadcrumb in flow)
   .eyebrow           — "Legal" label above the H1
   .legal-meta        — effective date / last updated line
   .toc               — table of contents (2-column on desktop, 1 on mobile)
   .legal-body        — main content container with scroll-margin
   .summary-card      — plain-language summary box (green left-border)
   .contact-panel     — contact info panel at the end of the page
   table, th, td      — data tables (Privacy only currently)
   .confirm           — yellow-highlighted placeholder markers ([CONFIRM date])

   ============================================================================== */

.legal-hero {
    padding: 56px 0 24px;
    border-bottom: 1px solid var(--line);
  }

.eyebrow {
    display: inline-block;
    font-family: var(--font-display); font-weight: 600; font-size: 0.8rem;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-primary-dark);
    margin-bottom: 12px;
  }

.legal-meta {
    color: var(--muted); font-size: 0.9rem; margin-top: 8px;
  }

/* ---- TOC ---- */

.toc {
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 22px 26px;
    margin: 36px 0 8px;
  }

.toc h2 {
    margin: 0 0 12px; font-size: 0.85rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--brand-primary-dark);
  }

.toc ol {
    columns: 2; column-gap: 32px;
    margin: 0; padding-left: 18px;
    font-size: 0.95rem;
  }

.toc li { margin-bottom: 4px; break-inside: avoid; }

.toc a { color: var(--ink-soft); text-decoration: none; }

.toc a:hover { color: var(--brand-primary-dark); text-decoration: underline; }

@media (max-width: 640px) { .toc ol { columns: 1; } }

/* ---- Body ---- */

.legal-body { padding: 16px 0 60px; }

.legal-body section { scroll-margin-top: 24px; }

/* Highlighted summary box for plain-language summary */

.summary-card {
    background: var(--bg-soft);
    border-left: 4px solid var(--brand-primary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 18px 22px;
    margin: 24px 0 32px;
  }

.summary-card h2 { margin-top: 0; font-size: 1.05rem; }

.summary-card p { margin-bottom: 8px; }

.summary-card p:last-child { margin-bottom: 0; }

/* Contact-block panel */

.contact-panel {
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 22px 26px;
    margin: 16px 0;
  }

.contact-panel strong { color: var(--ink); }

/* Tables */

table { width: 100%; border-collapse: collapse; margin: 14px 0 22px; font-size: 0.95rem; }

th, td {
    border: 1px solid var(--line);
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
  }

th {
    background: var(--bg-soft); font-family: var(--font-display);
    font-weight: 600; color: var(--ink); font-size: 0.9rem;
  }

/* CONFIRM markers — visible to humans, easy to grep, not screaming red */

.confirm {
    display: inline-block;
    background: #fff7e0;
    border: 1px dashed #d4a300;
    color: #6b5300;
    padding: 1px 8px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.85em;
    font-weight: 600;
  }

/* Print */

@media print {
    .toc { background: none; border: 1px solid #ccc; }
    a { color: #000; text-decoration: none; }
    .confirm { background: none; border: 1px solid #999; }
  }