/*
 * Shared styling for the four site-information pages
 * (About / Affiliate Disclosure / Privacy / Terms).
 *
 * 1. Mirrors the homepage's continuous background field exactly, reusing the
 *    same asset, positioning, repeat, size, opacity and filter. Scoped to
 *    body[data-page="policy"], which is used only by these four pages, so the
 *    homepage and every other page are untouched.
 * 2. Provides one shared compact side navigation card that sits to the right of
 *    the content on desktop and stacks cleanly below it on mobile.
 */

/* ---- Homepage background field (identical to body.home-page) ---- */
body[data-page="policy"] {
  position: relative !important;
  isolation: isolate !important;
  min-height: 100vh !important;
  overflow-x: clip !important;
  background: linear-gradient(180deg, #0b1019 0%, #080c13 100%) !important;
}

body[data-page="policy"]::before {
  content: "" !important;
  position: fixed !important;
  inset: -80px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  contain: paint !important;
  background-image: url("/assets/brand/aipornsurf-background-intercalated-optimized.webp?v=seo-perf-1") !important;
  background-repeat: repeat !important;
  background-size: 420px 406px !important;
  background-position: 0 0 !important;
  opacity: .085 !important;
  filter: grayscale(1) saturate(0) contrast(.9) brightness(1.55) !important;
  transform: rotate(-5deg) scale(1.06) !important;
  transform-origin: center top !important;
}

body[data-page="policy"]::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  contain: paint !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(105,240,220,.08), transparent 28%),
    radial-gradient(circle at 84% 18%, rgba(178,139,255,.10), transparent 30%),
    linear-gradient(180deg, rgba(11,16,25,.72) 0%, rgba(8,12,19,.82) 100%) !important;
}

body[data-page="policy"] > header,
body[data-page="policy"] > main,
body[data-page="policy"] > footer {
  position: relative !important;
  z-index: 2 !important;
}

body[data-page="policy"] .review-verdict .kicker {
  color: #38f58b;
}

/* ---- Shared compact side navigation card ---- */
.policy-side-nav {
  align-self: start;
  position: sticky;
  top: 100px;
  border: 1px solid rgba(56,245,139,.35);
  border-radius: var(--radius);
  padding: 22px;
  background: var(--panel);
}

.policy-side-nav__title {
  margin: 0 0 14px;
  color: #38f58b;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.policy-side-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.policy-side-nav__list a,
.policy-side-nav__list span {
  display: block;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px 13px;
  color: var(--muted);
  font-size: .92rem;
  font-weight: 600;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}

.policy-side-nav__list a:hover {
  color: var(--text);
  background: var(--panel-2);
  border-color: rgba(56,245,139,.45);
}

.policy-side-nav__list a:focus-visible {
  outline: 2px solid #38f58b;
  outline-offset: 2px;
}

.policy-side-nav__list .is-active {
  color: var(--text);
  background: rgba(56,245,139,.1);
  border-color: rgba(56,245,139,.45);
  box-shadow: inset 2px 0 0 #38f58b;
  font-weight: 750;
}

/* Reuse the site-wide homepage search component with the legal-page accent. */
body[data-page="policy"] .home-search .button.button-primary {
  color: #07130f !important;
  border-color: #38f58b !important;
  background: linear-gradient(180deg, #38f58b, #38f58b) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 5px 16px rgba(79,215,159,.15) !important;
}

body[data-page="policy"] .home-search .button.button-primary:hover,
body[data-page="policy"] .home-search .button.button-primary:focus-visible {
  color: #07130f !important;
  border-color: #38f58b !important;
  background: linear-gradient(180deg, #38f58b, #38f58b) !important;
  filter: brightness(1.06) !important;
}

/* Premium green-accent callout back to the homepage, below the legal links. */
.policy-side-nav__home {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  border: 1px solid #38f58b;
  border-radius: 12px;
  padding: 12px 14px;
  color: #07130f;
  background: linear-gradient(180deg, #4dfb9a, #38f58b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 6px 18px rgba(79,215,159,.20);
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .01em;
  text-align: center;
  transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}

.policy-side-nav__home:hover {
  filter: brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 8px 22px rgba(79,215,159,.28);
}

.policy-side-nav__home:focus-visible {
  outline: 2px solid #38f58b;
  outline-offset: 2px;
}

@media (max-width: 700px) {
  .policy-side-nav {
    position: static;
    top: auto;
    margin-top: 30px;
  }
}