/* ============================================================
   Fuel by Franzia — TWG Legal plugin styling
   -----------------------------------------------------------------
   Rendered legal content (age-gate Terms/Privacy popups + full legal
   pages) for the TWG Legal plugin. Lives in the theme (enqueued from
   functions.php, versioned via FUEL_ASSETS_VER) — NOT in plugin/DB CSS.

   Notes:
   - The theme's Tailwind build generates `.z-1001` but NOT `.z-1002`,
     so the legal popup containers compute `z-index:auto`. Because the
     age gate uses `.z-1001` (opaque, full-screen), a `z-index:auto`
     popup renders BEHIND the gate when opened from it. We set an
     explicit stacking + hidden-by-default/active-only rule here.
   - Full legal pages mirror the staging site's `.entry` typography.
   ============================================================ */

/* ---- Legal popup containers (opened from the age gate / links) ---- */
.content-popup {
  display: none;
  z-index: 1002; /* must be above the age gate's z-1001 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* iOS momentum scroll inside the legal popup */
}
.content-popup.active {
  display: block;
}

/* ---- Popup slots injected by the TWG plugin renderer ---- */
[data-twg-legal-popup] .legal-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}
[data-twg-legal-popup] .legal-table th,
[data-twg-legal-popup] .legal-table td {
  border: 1px solid #d2d6dc;
  padding: 0.6rem 0.75rem;
  text-align: left;
  vertical-align: top;
  font-size: 0.9375rem;
  line-height: 1.5;
}
[data-twg-legal-popup] .legal-table th {
  font-weight: 700;
}
[data-twg-legal-popup] .twg-legal-popup-last-updated {
  font-size: 0.8125rem;
  color: #6b7280;
  margin-bottom: 1rem;
}

/* ---- Full legal pages: match staging (contact-page section + .entry typography) ----
   Staging renders the legal page inside: section.contact-section.bg-section.pt-20.lg:pt-16.pb-24.lg:pb-36
   > div.container.max-w-[910px] > h1.title + .entry. The plugin outputs an outer wrapper
   + #legal-page, so we give #legal-page the same background + padding and constrain the
   title/last-updated/content to a 910px container. */
#legal-page {
  background: linear-gradient(180deg, rgba(0,0,0,.9) 0, rgba(13,2,5,.9) 18.23%, rgba(239,51,64,.9) 78.33%, rgba(187,41,187,.9));
  background-size: 300% 300%;
  animation: linearGradientBgSection 15s ease infinite;
  width: 100%;
  box-sizing: border-box;
  padding: 5rem 1.5rem 6rem;          /* pt-20  px-6  pb-24 */
}
@media (min-width: 1024px) {
  #legal-page { padding: 4rem 2rem 9rem; } /* lg:pt-16  px-8  lg:pb-36 */
}
#legal-page #legal-title,
#legal-page #legal-last-updated,
#legal-page #legal-content {
  max-width: 910px;                   /* staging container max-w-[910px] */
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
#legal-page #legal-title {
  font-family: Futura, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.36em !important;
  text-transform: uppercase;
  margin: 0 auto 3rem;                /* mb-12 */
}
@media (min-width: 1024px) {
  #legal-page #legal-title { font-size: 1.875rem; margin-bottom: 4rem; } /* mb-16 */
}
#legal-page #legal-last-updated {
  font-size: 0.8125rem;
  color: #e8e8eb;
  margin: 0 auto 1.5rem;
}
#legal-page #legal-content h2 {
  font-family: Futura, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.36em !important;
  text-transform: uppercase;
  margin: 0 0 1rem;
}
@media (min-width: 768px) {
  #legal-page #legal-content h2 { font-size: 1.875rem; }
}
#legal-page #legal-content h3 {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 2rem;
  margin: 2rem 0 1rem;
}
#legal-page #legal-content h4 {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.75rem;
  margin: 1.5rem 0 0.75rem;
}
#legal-page #legal-content h5,
#legal-page #legal-content h6 {
  font-weight: 500;
  line-height: 1.75rem;
  margin: 1.5rem 0 0.75rem;
}
#legal-page #legal-content p {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.75rem;
  margin: 0 0 1.5rem;
}
#legal-page #legal-content p:last-child {
  margin-bottom: 0;
}
#legal-page #legal-content a {
  text-decoration-line: underline;
}
#legal-page #legal-content a:hover {
  text-decoration-line: none;
}
#legal-page #legal-content ul {
  list-style-type: disc;
}
#legal-page #legal-content ol {
  list-style-type: decimal;
}
#legal-page #legal-content ul,
#legal-page #legal-content ol {
  list-style-position: inside;
  margin: 0 0 1rem;
  padding: 0;
}
#legal-page #legal-content li {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.75rem;
  list-style-position: outside;
  margin-bottom: 0.75rem;
  margin-left: 1.5rem;
}
#legal-page #legal-content li ul,
#legal-page #legal-content li ol {
  margin-left: 1.5rem;
  margin-top: 1rem;
}
#legal-page #legal-content .legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
}
#legal-page #legal-content .legal-table th,
#legal-page #legal-content .legal-table td {
  border: 1px solid #d2d6dc;
  padding: 0.6rem 0.75rem;
  text-align: left;
  vertical-align: top;
  font-size: 0.9375rem;
  line-height: 1.5;
}
#legal-page #legal-content .legal-table th {
  font-weight: 700;
}