/* =========================================================
   Privacy Policy
   ========================================================= */

/* Page-specific hooks (optional) */
.page-contact .tron-section-header h1{
  margin: 0 0 0.75rem;
  padding: 1rem 0;
  color: var(--accent);
  font-size: 2.6rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow:
    0 0 1px rgba(0, 255, 255, 0.9),
    0 0 12px rgba(0, 255, 255, 0.45);
}

.page-privacy{
  scroll-behavior: smooth;
}

/* Two-column legal layout: sticky TOC + content */
.legal-layout{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 1.25rem;
  align-items: start;
}

/* Hero panel at top */
.legal-hero{
  margin-bottom: 1.25rem;
}

.legal-lede{
  margin: 0;
  line-height: 1.75;
}

.legal-callout{
  margin: 1rem 0 0;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  background: rgba(0,255,255,0.08);
  border: 1px solid rgba(0,255,255,0.35);
  box-shadow: inset 0 0 14px rgba(0,255,255,0.10);
}

.legal-muted{
  margin: 1rem 0 0;
  opacity: 0.9;
}

/* Make "Last updated" stand out */
.legal-updated{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 65%, transparent);
  background: rgba(0,255,255,0.10);
  color: #ffffff;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: capitalize;
  box-shadow:
    0 0 16px color-mix(in srgb, var(--accent) 22%, transparent),
    inset 0 0 12px color-mix(in srgb, var(--accent) 12%, transparent);
  opacity: 1;
  font-size: 0.85rem !important;
}

.legal-updated strong{
  color: var(--accent);
  text-shadow: 0 0 10px var(--accentGlow);
  font-weight: 900;
}

.legal-updated::before{
  content: "◆";
  color: var(--accent);
  text-shadow: 0 0 10px var(--accentGlow);
  font-weight: 900;
}

/* TOC (desktop) */
.legal-toc{
  position: sticky;
  top: 1rem;
  padding: 1.25rem;
}

.legal-toc__title{
  margin: 0 0 0.75rem;
  color: var(--accent);
  font-weight: 900;
  letter-spacing: 0.08em;
  font-size: 1.2rem !important;
  text-transform: uppercase;
  text-shadow: 0 0 8px var(--accentGlow);
}

.legal-toc__list{
  list-style: none;
  padding: 0;
  margin: 0;
}

.legal-toc__list li{
  margin: 0.35rem 0;
}

.legal-toc__list a{
  display: block;
  padding: 0.01rem 0.65rem;
  border-radius: 12px;
  text-decoration: none;
  color: var(--accentText);
  border: 1px solid transparent;
  background: rgba(0,0,0,0.18);
  line-height: 1.3;
  min-height: 44px;
  min-width: 44px;
  align-content: center;
}

.legal-toc__list a:hover,
.legal-toc__list a:focus-visible{
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 22%, transparent);
  outline: none;
}

/* Content */
.legal-content{
  padding: 2rem;
}

.legal-section{
  scroll-margin-top: 96px;
  padding-top: 0.25rem;
}

.legal-section + .legal-section{
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(0,255,255,0.25);
}

/* Headings inside legal content */
.legal-content h2{
  margin: 0 0 0.75rem;
  color: var(--accent);
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 0 10px var(--accentGlow);
}

.legal-content h3{
  margin: 1.25rem 0 0.6rem;
  color: var(--accent);
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.95;
  text-shadow: 0 0 8px var(--accentGlow);
}

.legal-content p{
  margin: 0.75rem 0 0.75rem 0;
  line-height: 1.75;
}

/* Ordered list helpers */
.legal-alpha{
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
}

.legal-alpha li{
  margin: 0.55rem 0;
  line-height: 1.7;
}

.legal-roman{
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
}

.legal-roman li{
  margin: 0.55rem 0;
  line-height: 1.7;
}

/* Links */
.legal-link,
.legal-content a{
  color: var(--accent);
  text-decoration: underline;
  text-shadow: 0 0 8px var(--accentGlow);
}

.legal-content a:hover{
  color: #ffffff;
}

.privacy-h1{
  font-size: 1.8rem;
}

/* Active TOC link (stays highlighted after click / while section is in view) */
.legal-toc__list a.is-active{
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 22%, transparent);
  background: rgba(0,255,255,0.10);
}

/* Optional: slightly stronger when active + hovered */
.legal-toc__list a.is-active:hover{
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* =========================
   Disable Tron scan animation (global)
   ========================= */
.tron-panel::before,
.page-gameplay .gp-hero::before,
.page-gameplay .gp-band::before,
.page-about .about-hero::before,
.page-contact .info-section::before,
.page-subscription .sub-card::before{
  animation: none !important;
}

/* Pink flash on the active section (3s) */
.legal-section.flash-section{
  background: rgba(255,105,180,0.06);
  box-shadow:
    0 0 28px rgba(255,105,180,0.25),
    inset 0 0 18px rgba(255,105,180,0.10);
  transition: outline-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

/* Optional: make the section heading pop too */
.legal-section.flash-section h2,
.legal-section.flash-section h3{
  color: #ff69b4;
  text-shadow:
    0 0 10px rgba(255,105,180,0.55),
    0 0 18px rgba(255,105,180,0.25);
}

/* default */
.legal-section p,
.legal-section div,
.legal-section ul li {
  transition: color .35s ease;
}

/* temporary flash */
.legal-section.flash-section p,
.legal-section.flash-section div,
.legal-section.flash-section ul li,
.legal-section.flash-section ul li::before,
.legal-section.flash-section ol li,
.legal-section.flash-section ol li::before {
  color: #ff69b4;
}

/* 3s pink emphasis for the currently selected/active TOC item */
.legal-toc__list a.flash-pink{
  border-color: rgba(255,105,180,0.95) !important;
  background: rgba(255,105,180,0.16) !important;
  color: #ffffff !important;
  box-shadow:
    0 0 22px rgba(255,105,180,0.45),
    inset 0 0 16px rgba(255,105,180,0.18) !important;
  text-shadow: 0 0 10px rgba(255,105,180,0.45);
}

/* =========================================================
   Responsive: stack TOC above content (tablet)
   - Keeps normal in-flow TOC, not off-canvas.
   ========================================================= */
/*@media (max-width: 980px){
  .legal-layout{
    grid-template-columns: 1fr;
  }
  .legal-toc{
    position: relative;
    top: auto;
  }
}*/

/* Extra small: tighten padding */
@media (max-width: 520px){
  .legal-content{
    padding: 1.25rem;
  }
  .legal-toc{
    padding: 1rem;
  }
}

/* =========================================================
   Mobile OFF-CANVAS TOC (<=980px)
   - Shows a left-edge arrow button
   - TOC slides over content
   - Backdrop appears behind it
   ========================================================= */

/* Old dropdown toggle system is not used */
.legal-toc__toggle{
  display: none !important;
}

@media (max-width: 980px){

  /* single column on mobile */
  .legal-layout{
    grid-template-columns: 1fr !important;
  }

  /* Off-canvas drawer */
  .page-privacy .legal-toc{
    display: block !important;      /* keep it in DOM; we slide it */
    position: fixed !important;
    left: 0;
    top: 0;                         /* if you have fixed nav, set to nav height */
    height: 100vh;
    width: min(86vw, 360px);

    z-index: 9999;
    padding: 1rem;

    overflow: hidden;
    transform: translateX(-105%);
    transition: transform 220ms ease;

    border-radius: 0 18px 18px 0;
  }

  .page-privacy .legal-toc.is-open{
    transform: translateX(0);
  }

  /* Scroll list inside drawer */
  .page-privacy .legal-toc__list{
    max-height: calc(100vh - 120px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 0.25rem;
  }

  .page-privacy .legal-toc__list a{
    min-height: 48px;
    padding: 0.65rem 0.75rem;
    border-radius: 14px;
    line-height: 1.25;
  }

  /* Left-edge ARROW button */
  .page-privacy .legal-toc__edge-btn{
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);

    z-index: 10000;

    width: 44px;
    height: 64px;

    display: grid;
    place-items: center;

    border-radius: 0 16px 16px 0;
    border: 1px solid rgba(0,255,255,0.35);
    background: rgba(0,0,0,0.55);
    box-shadow:
      0 0 18px rgba(0,255,255,0.18),
      inset 0 0 14px rgba(0,255,255,0.10);

    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;

    color: var(--accent);
  }

  /* Arrow points toward content (tap to open) */
  .page-privacy .legal-toc__edge-btn::before{
    content: "›";
    font-size: 2.2rem;
    line-height: 1;
    transform: translateX(2px);
    text-shadow: 0 0 10px rgba(0,255,255,0.45);
  }

  /* When open, arrow flips */
  .page-privacy .legal-toc__edge-btn[aria-expanded="true"]::before{
    content: "‹";
    transform: translateX(-2px);
  }

  /* Backdrop overlay */
  .page-privacy .legal-toc__backdrop{
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0,0,0,0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }

  /* Optional: lock scroll when drawer open */
  .page-privacy.legal-toc-open{
    overflow: hidden;
  }
}

/* =========================================================
   Privacy TOC — OFF-CANVAS DRAWER (MOBILE ONLY)
   Requires JS toggling:
     .legal-toc.is-open
     .legal-toc__backdrop.is-open
     .legal-toc__edge-btn[aria-expanded="true/false"]
   ========================================================= */

/* We are NOT using the dropdown toggle system */
.legal-toc__toggle{ display: none !important; }

/* Tablet stack (769px–980px): normal in-flow TOC above content */
@media (max-width: 980px) and (min-width: 769px){
  .legal-layout{ grid-template-columns: 1fr; }
  .legal-toc{
    position: relative;
    top: auto;
  }
}

/* Mobile drawer (<=768px) */
@media (max-width: 768px){

  /* Layout becomes single column */
  .legal-layout{ grid-template-columns: 1fr !important; }

  /* ---------- Backdrop overlay ---------- */
  .page-privacy .legal-toc__backdrop{
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0,0,0,0.60);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }

  /* ---------- Off-canvas panel ---------- */
  .page-privacy .legal-toc{
    /* IMPORTANT: never use display:none for off-canvas */
    display: block !important;

    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: min(86vw, 360px);

    z-index: 9999;
    padding: 1rem;

    /* slide behavior */
    transform: translateX(-105%);
    transition: transform 220ms ease;

    /* keep it from capturing taps when closed */
    visibility: hidden;
    pointer-events: none;

    /* panel shape */
    border-radius: 0 18px 18px 0;

    will-change: transform;
  }

  .page-privacy .legal-toc.is-open{
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }

  /* Scroll inside the panel */
  .page-privacy .legal-toc__list{
    max-height: calc(100vh - 120px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 0.25rem;
  }

  .page-privacy .legal-toc__list a{
    min-height: 48px;
    padding: 0.65rem 0.75rem;
    border-radius: 14px;
    line-height: 1.25;
  }

  /* ---------- Left-edge ARROW button ---------- */
  .page-privacy .legal-toc__edge-btn{
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);

    z-index: 10000;

    width: 44px;
    height: 64px;

    display: grid;
    place-items: center;

    border-radius: 0 16px 16px 0;
    border: 1px solid rgba(0,255,255,0.35);
    background: rgba(0,0,0,0.60);

    box-shadow:
      0 0 18px rgba(0,255,255,0.18),
      inset 0 0 14px rgba(0,255,255,0.10);

    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;

    color: var(--accent);
  }

  /* Arrow pointing RIGHT to indicate “open” */
  .page-privacy .legal-toc__edge-btn::before{
    content: "❯";
    font-size: 2rem;
    line-height: 1;
    transform: translateX(2px);
    text-shadow: 0 0 10px rgba(0,255,255,0.45);
  }

  /* When open, arrow flips LEFT to indicate “close” */
  .page-privacy .legal-toc__edge-btn[aria-expanded="true"]::before{
    content: "❮";
    transform: translateX(-2px);
  }
}

/* =========================================================
   END OF Privacy Policy
   ========================================================= */