/*
 * legal.css — QMB Portal Legal Page Stylesheet
 * File: assets/css/legal.css
 *
 * Parent surface. Readable, trustworthy, on-brand.
 * All color values via tokens.css custom properties — no raw hex.
 * Load AFTER tokens.css.
 *
 *
 * Applies to: pages/privacy.php · pages/terms.php
 *             pages/cookies.php · pages/coppa.php
 */

/* =========================================================
   GOOGLE FONTS — Fredoka (display) + Lexend (body)
   Only import here if tokens.css is not already loaded with
   the full @import block. Legal pages always load tokens.css
   first, so fonts should already be available. This @import
   is a safety net for standalone rendering.
   ========================================================= */
   @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Lexend:wght@300;400;500;600&display=swap');

   /* =========================================================
      PAGE BASE
      ========================================================= */
   
   .legal-page {
       font-family: var(--font-body);
       font-size: var(--text-base);
       line-height: 1.7;
       color: var(--color-dark-gray);
       background-color: var(--color-white);
       margin: 0;
       padding: 0;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
   }
   
   /* =========================================================
      LIGHTWEIGHT NAV
      Logo left · Back link right · No game nav chrome
      ========================================================= */
   
   .legal-nav {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: var(--spacing-md) var(--spacing-xl);
       background-color: var(--color-black);
       border-bottom: 3px solid var(--color-sunflower);
       position: sticky;
       top: 0;
       z-index: 100;
       box-shadow: var(--shadow-md);
   }
   
   .legal-nav-brand {
       display: flex;
       align-items: center;
       gap: 0.6rem;
       text-decoration: none;
       color: var(--color-white);
   }
   
   .legal-nav-brand img,
   .legal-nav-brand svg.legal-mark {
       width: 32px;
       height: 35px;
       flex-shrink: 0;
   }
   
   .legal-nav-brand-name {
       font-family: var(--font-display);
       font-size: var(--text-xl);
       font-weight: 600;
       color: var(--color-white);
       line-height: 1;
   }
   
   .legal-nav-back {
       display: inline-flex;
       align-items: center;
       gap: 0.4rem;
       font-family: var(--font-body);
       font-size: var(--text-sm);
       font-weight: 500;
       color: var(--color-sunflower);
       text-decoration: none;
       padding: 0.375rem 0.75rem;
       border: 1.5px solid var(--color-sunflower);
       border-radius: var(--radius-full);
       transition: background-color 0.15s ease, color 0.15s ease;
   }
   
   .legal-nav-back:hover,
   .legal-nav-back:focus {
       background-color: var(--color-sunflower);
       color: var(--color-black);
       outline: none;
   }
   
   .legal-nav-back:focus-visible {
       outline: 3px solid var(--color-white);
       outline-offset: 2px;
   }
   
   .legal-nav-back svg {
       width: 14px;
       height: 14px;
       flex-shrink: 0;
   }
   
   /* =========================================================
      LAYOUT CONTAINER
      Max 720px — optimal adult reading line length
      ========================================================= */
   
   .legal-container {
       max-width: 720px;
       margin: 0 auto;
       padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-2xl);
   }
   
   @media (max-width: 768px) {
       .legal-container {
           padding: var(--spacing-lg) var(--spacing-md) var(--spacing-xl);
       }
       .legal-nav {
           padding: var(--spacing-md);
       }
   }
   
   /* =========================================================
      HERO — page title, effective date, last updated
      ========================================================= */
   
   .legal-hero {
       padding: var(--spacing-2xl) 0 var(--spacing-xl);
       border-bottom: 2px solid var(--color-light-gray);
       margin-bottom: var(--spacing-xl);
   }
   
   .legal-hero-label {
       font-family: var(--font-body);
       font-size: var(--text-sm);
       font-weight: 600;
       letter-spacing: 0.08em;
       text-transform: uppercase;
       color: var(--color-medium-gray);
       margin: 0 0 var(--spacing-sm);
   }
   
   .legal-hero h1 {
       font-family: var(--font-display);
       font-size: var(--text-4xl);
       font-weight: 700;
       color: var(--color-black);
       margin: 0 0 var(--spacing-md);
       line-height: 1.15;
   }
   
   /* Sunflower accent underline on page title */
   .legal-hero h1::after {
       content: '';
       display: block;
       width: 3rem;
       height: 4px;
       background-color: var(--color-sunflower);
       border-radius: var(--radius-full);
       margin-top: var(--spacing-sm);
   }
   
   .legal-hero-meta {
       display: flex;
       flex-wrap: wrap;
       gap: var(--spacing-lg);
       font-size: var(--text-sm);
       color: var(--color-medium-gray);
       margin-top: var(--spacing-md);
   }
   
   .legal-hero-meta span strong {
       color: var(--color-dark-gray);
   }
   
   /* Parent-facing intro note */
   .legal-intro-note {
       background-color: var(--color-light-gray);
       border-left: 4px solid var(--color-info);
       border-radius: 0 var(--radius-md) var(--radius-md) 0;
       padding: var(--spacing-md) var(--spacing-lg);
       margin: var(--spacing-xl) 0;
       font-size: var(--text-base);
       line-height: 1.6;
       color: var(--color-dark-gray);
   }
   
   .legal-intro-note p:last-child {
       margin-bottom: 0;
   }
   
   /* =========================================================
      TABLE OF CONTENTS
      Sticky on desktop, normal flow on mobile
      ========================================================= */
   
   .legal-toc {
       background-color: var(--color-light-gray);
       border-radius: var(--radius-lg);
       padding: var(--spacing-lg);
       margin-bottom: var(--spacing-2xl);
   }
   
   .legal-toc-title {
       font-family: var(--font-display);
       font-size: var(--text-lg);
       font-weight: 600;
       color: var(--color-black);
       margin: 0 0 var(--spacing-md);
   }
   
   .legal-toc ol {
       margin: 0;
       padding-left: 1.25rem;
       list-style-type: decimal;
   }
   
   .legal-toc li {
       margin-bottom: 0.35rem;
       font-size: var(--text-sm);
   }
   
   .legal-toc a {
       color: var(--color-blue);
       text-decoration: none;
       font-weight: 400;
   }
   
   .legal-toc a:hover {
       text-decoration: underline;
   }
   
   /* =========================================================
      SECTIONS
      Numbered, clearly separated
      ========================================================= */
   
   .legal-section {
       margin-bottom: var(--spacing-2xl);
       padding-bottom: var(--spacing-xl);
       border-bottom: 1px solid var(--color-light-gray);
       scroll-margin-top: 5rem; /* account for sticky nav */
   }
   
   .legal-section:last-of-type {
       border-bottom: none;
   }
   
   /* Alternating section backgrounds */
   .legal-section.alt-bg {
       background-color: var(--color-light-gray);
       border-radius: var(--radius-lg);
       padding: var(--spacing-xl);
       margin-left: calc(-1 * var(--spacing-md));
       margin-right: calc(-1 * var(--spacing-md));
   }
   
   @media (max-width: 768px) {
       .legal-section.alt-bg {
           margin-left: 0;
           margin-right: 0;
       }
   }
   
   /* H2 — top-level section heading */
   .legal-section h2 {
       font-family: var(--font-display);
       font-size: var(--text-3xl);
       font-weight: 600;
       color: var(--color-black);
       margin: 0 0 var(--spacing-md);
       line-height: 1.25;
       display: flex;
       align-items: baseline;
       gap: 0.6rem;
   }
   
   /* Sunflower number badge on h2 */
   .legal-section h2 .section-num {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       background-color: var(--color-sunflower);
       color: var(--color-black);
       font-family: var(--font-display);
       font-size: var(--text-base);
       font-weight: 700;
       min-width: 2rem;
       height: 2rem;
       border-radius: var(--radius-full);
       flex-shrink: 0;
       padding: 0 0.5rem;
   }
   
   /* H3 — subsection heading */
   .legal-section h3 {
       font-family: var(--font-display);
       font-size: var(--text-2xl);
       font-weight: 500;
       color: var(--color-black);
       margin: var(--spacing-xl) 0 var(--spacing-md);
       line-height: 1.3;
   }
   
   /* H4 — minor subsection */
   .legal-section h4 {
       font-family: var(--font-display);
       font-size: var(--text-xl);
       font-weight: 500;
       color: var(--color-dark-gray);
       margin: var(--spacing-lg) 0 var(--spacing-sm);
   }
   
   /* Body text */
   .legal-body p,
   .legal-section p {
       margin: 0 0 var(--spacing-md);
       font-size: var(--text-base);
       line-height: 1.7;
       color: var(--color-dark-gray);
   }
   
   .legal-body ul,
   .legal-section ul,
   .legal-body ol,
   .legal-section ol {
       margin: 0 0 var(--spacing-md);
       padding-left: 1.5rem;
   }
   
   .legal-body li,
   .legal-section li {
       margin-bottom: 0.4rem;
       line-height: 1.6;
       color: var(--color-dark-gray);
   }
   
   /* =========================================================
      CALLOUT BOXES
      .legal-callout         — green / trust
      .legal-callout.info    — blue / informational
      .legal-callout.warn    — tangerine / attorney-review
      ========================================================= */
   
   .legal-callout {
       border-left: 4px solid var(--color-success);
       background-color: color-mix(in srgb, var(--color-success) 8%, var(--color-white));
       border-radius: 0 var(--radius-md) var(--radius-md) 0;
       padding: var(--spacing-md) var(--spacing-lg);
       margin: var(--spacing-lg) 0;
   }
   
   /* Fallback for browsers without color-mix */
   @supports not (background-color: color-mix(in srgb, green 8%, white)) {
       .legal-callout {
           background-color: #f0faf3;
       }
       .legal-callout.info {
           background-color: #eef7fc;
       }
       .legal-callout.warn {
           background-color: #fff5ef;
       }
   }
   
   .legal-callout p,
   .legal-callout ul,
   .legal-callout li {
       margin-bottom: 0.25rem;
       font-size: var(--text-base);
       color: var(--color-dark-gray);
   }
   
   .legal-callout p:last-child {
       margin-bottom: 0;
   }
   
   .legal-callout strong {
       color: var(--color-black);
   }
   
   .legal-callout.info {
       border-left-color: var(--color-info);
       background-color: color-mix(in srgb, var(--color-info) 8%, var(--color-white));
   }
   
   .legal-callout.warn {
       border-left-color: var(--color-tangerine);
       background-color: color-mix(in srgb, var(--color-tangerine) 8%, var(--color-white));
   }
   
   /* Attorney-review flag — internal use indicator */
   .legal-attorney-flag {
       display: flex;
       align-items: flex-start;
       gap: 0.5rem;
       border-left: 4px solid var(--color-tangerine);
       background-color: color-mix(in srgb, var(--color-tangerine) 8%, var(--color-white));
       border-radius: 0 var(--radius-md) var(--radius-md) 0;
       padding: var(--spacing-sm) var(--spacing-md);
       margin: var(--spacing-md) 0;
       font-size: var(--text-sm);
       color: var(--color-dark-gray);
       font-style: italic;
   }
   
   .legal-attorney-flag::before {
       content: '⚑';
       color: var(--color-tangerine);
       font-style: normal;
       flex-shrink: 0;
       margin-top: 2px;
   }
   
   /* =========================================================
      DATA TABLES
      Cookie inventory, rights matrix, data retention
      Mobile-responsive via horizontal scroll
      ========================================================= */
   
   .legal-table-wrapper {
       overflow-x: auto;
       -webkit-overflow-scrolling: touch;
       margin: var(--spacing-lg) 0;
       border-radius: var(--radius-lg);
       border: 1px solid var(--color-light-gray);
       box-shadow: var(--shadow-sm);
   }
   
   .legal-table {
       width: 100%;
       border-collapse: collapse;
       font-size: var(--text-sm);
       background-color: var(--color-white);
   }
   
   .legal-table thead {
       background-color: var(--color-black);
       color: var(--color-white);
   }
   
   .legal-table thead th {
       padding: 0.75rem var(--spacing-md);
       text-align: left;
       font-family: var(--font-body);
       font-weight: 600;
       font-size: var(--text-sm);
       white-space: nowrap;
   }
   
   .legal-table tbody tr {
       border-bottom: 1px solid var(--color-light-gray);
       transition: background-color 0.1s ease;
   }
   
   .legal-table tbody tr:last-child {
       border-bottom: none;
   }
   
   .legal-table tbody tr:nth-child(even) {
       background-color: var(--color-light-gray);
   }
   
   .legal-table tbody tr:hover {
       background-color: color-mix(in srgb, var(--color-sunflower) 12%, var(--color-white));
   }
   
   .legal-table td {
       padding: 0.75rem var(--spacing-md);
       vertical-align: top;
       line-height: 1.5;
       color: var(--color-dark-gray);
   }
   
   .legal-table td code {
       background-color: var(--color-light-gray);
       padding: 0.1em 0.35em;
       border-radius: var(--radius-sm);
       font-family: var(--font-mono);
       font-size: 0.9em;
       color: var(--color-black);
   }
   
   /* =========================================================
      PRINT LINK
      ========================================================= */
   
   .legal-print-btn {
       display: inline-flex;
       align-items: center;
       gap: 0.4rem;
       font-family: var(--font-body);
       font-size: var(--text-sm);
       color: var(--color-medium-gray);
       background: none;
       border: 1px solid var(--color-light-gray);
       border-radius: var(--radius-full);
       padding: 0.3rem 0.75rem;
       cursor: pointer;
       text-decoration: none;
       transition: color 0.15s ease, border-color 0.15s ease;
       margin-left: auto;
   }
   
   .legal-print-btn:hover {
       color: var(--color-dark-gray);
       border-color: var(--color-medium-gray);
   }
   
   .legal-hero-actions {
       display: flex;
       align-items: center;
       margin-top: var(--spacing-md);
       flex-wrap: wrap;
       gap: var(--spacing-sm);
   }
   
   /* =========================================================
      LEGAL FOOTER
      ========================================================= */
   
   .legal-page-footer {
       background-color: var(--color-light-gray);
       border-top: 3px solid var(--color-sunflower);
       padding: var(--spacing-xl) var(--spacing-xl);
       margin-top: var(--spacing-2xl);
   }
   
   .legal-footer-inner {
       max-width: 720px;
       margin: 0 auto;
   }
   
   .legal-footer-contact {
       margin-bottom: var(--spacing-lg);
   }
   
   .legal-footer-contact h3 {
       font-family: var(--font-display);
       font-size: var(--text-xl);
       font-weight: 600;
       color: var(--color-black);
       margin: 0 0 var(--spacing-sm);
   }
   
   .legal-footer-contact p {
       margin: 0.25rem 0;
       font-size: var(--text-sm);
       color: var(--color-dark-gray);
   }
   
   .legal-footer-contact a {
       color: var(--color-blue);
       text-decoration: none;
   }
   
   .legal-footer-contact a:hover {
       text-decoration: underline;
   }
   
   .legal-footer-links {
       display: flex;
       flex-wrap: wrap;
       gap: var(--spacing-md);
       padding: var(--spacing-lg) 0;
       border-top: 1px solid var(--color-medium-gray);
       border-bottom: 1px solid var(--color-medium-gray);
       margin: var(--spacing-lg) 0;
   }
   
   .legal-footer-links a {
       font-size: var(--text-sm);
       color: var(--color-blue);
       text-decoration: none;
   }
   
   .legal-footer-links a:hover {
       text-decoration: underline;
   }
   
   .legal-footer-links a[aria-current="page"] {
       color: var(--color-medium-gray);
       pointer-events: none;
   }
   
   .legal-footer-copyright {
       font-size: var(--text-xs);
       color: var(--color-medium-gray);
       margin: 0;
   }
   
   .legal-footer-counsel-note {
       display: none; /* only visible in print */
       font-size: var(--text-sm);
       color: var(--color-medium-gray);
       font-style: italic;
       margin-top: var(--spacing-md);
       padding: var(--spacing-md);
       border: 1px solid var(--color-light-gray);
       border-radius: var(--radius-md);
   }
   
   /* =========================================================
      SKIP LINK — accessibility
      ========================================================= */
   
   .skip-link {
       position: absolute;
       top: -40px;
       left: 0;
       background: var(--color-sunflower);
       color: var(--color-black);
       font-weight: 600;
       padding: 0.5rem 1rem;
       z-index: 9999;
       border-radius: 0 0 var(--radius-md) 0;
       text-decoration: none;
   }
   
   .skip-link:focus {
       top: 0;
   }
   
   /* =========================================================
      RESPONSIVE — mobile-first adjustments
      ========================================================= */
   
   @media (max-width: 768px) {
       .legal-hero h1 {
           font-size: var(--text-3xl);
       }
   
       .legal-section h2 {
           font-size: var(--text-2xl);
       }
   
       .legal-section h3 {
           font-size: var(--text-xl);
       }
   
       .legal-hero-meta {
           flex-direction: column;
           gap: var(--spacing-sm);
       }
   
       .legal-toc {
           padding: var(--spacing-md);
       }
   
       .legal-page-footer {
           padding: var(--spacing-lg) var(--spacing-md);
       }
   
       .legal-footer-links {
           flex-direction: column;
           gap: var(--spacing-sm);
       }
   }
   
   /* =========================================================
      PRINT STYLESHEET
      Clean, no-chrome rendering for attorneys and filing
      ========================================================= */
   
   @media print {
       .legal-nav,
       .legal-toc,
       .legal-print-btn,
       .legal-nav-back {
           display: none !important;
       }
   
       .legal-page {
           font-size: 10pt;
           line-height: 1.5;
           color: #000;
           background: #fff;
       }
   
       .legal-container {
           max-width: 100%;
           padding: 0;
       }
   
       .legal-hero h1 {
           font-size: 18pt;
       }
   
       .legal-section h2 {
           font-size: 14pt;
           page-break-after: avoid;
       }
   
       .legal-section h3 {
           font-size: 12pt;
           page-break-after: avoid;
       }
   
       .legal-callout {
           border-left: 2pt solid #000;
           background: none;
           padding: 4pt 8pt;
       }
   
       .legal-table-wrapper {
           overflow: visible;
           box-shadow: none;
           border: 1pt solid #ccc;
       }
   
       .legal-table thead {
           background: #f0f0f0;
           color: #000;
           -webkit-print-color-adjust: exact;
           print-color-adjust: exact;
       }
   
       .legal-attorney-flag {
           border-left: 2pt solid #888;
           background: none;
           font-style: italic;
       }
   
       .legal-footer-counsel-note {
           display: block;
       }
   
       .legal-section.alt-bg {
           background: none;
           padding: 0;
           margin: 0;
       }
   
       a[href]::after {
           content: " (" attr(href) ")";
           font-size: 0.85em;
           color: #555;
       }
   
       /* Don't print mailto: or anchor links */
       a[href^="mailto:"]::after,
       a[href^="#"]::after {
           content: none;
       }
   }