/* =========================================================
   policy.css — styles for Terms / Privacy pages
   Reuses variables & header classes from styles.css
   ========================================================= */

/* ---- Document dropdown in navbar (replaces .nav-links) ---- */
.doc-dropdown { position: relative; }

.doc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--grey);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 2px;
  transition: color 0.18s;
}
.doc-toggle:hover { color: #fff; }
.doc-toggle .chev { transition: transform 0.22s ease; }
.doc-dropdown.open .doc-toggle .chev { transform: rotate(180deg); }
.doc-dropdown.open .doc-toggle { color: #fff; }

.doc-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 260px;
  background: #1b1b1d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 60;
}
.doc-dropdown.open .doc-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.doc-menu a {
  display: block;
  padding: 11px 14px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 400;
  color: #dcdcdc;
  transition: background 0.15s, color 0.15s;
}
.doc-menu a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.doc-menu a.active { color: var(--red); background: rgba(251, 61, 54, 0.09); font-weight: 500; }

/* ---- Policy content ---- */
.policy-main {
  max-width: 900px;
  margin: 0 auto;
  padding-top: 44px;
  padding-bottom: 90px;
}

.doc[hidden] { display: none; }

.doc-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 6px;
}
.doc-date {
  font-size: 14px;
  font-weight: 400;
  color: var(--grey);
  margin-bottom: 22px;
}
.doc-intro {
  font-size: 14px;
  font-weight: 400;
  color: #cdcdcf;
  line-height: 1.75;
  margin-bottom: 30px;
}

.doc-section { margin-bottom: 24px; }
.doc-section h3 {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 7px;
}
.doc-section p {
  font-size: 14px;
  font-weight: 400;
  color: #cdcdcf;
  line-height: 1.75;
  margin-bottom: 9px;
}
.doc-section p:last-child { margin-bottom: 0; }
.doc-section ul {
  margin: 8px 0 10px;
  padding-left: 22px;
}
.doc-section li {
  font-size: 14px;
  font-weight: 400;
  color: #cdcdcf;
  line-height: 1.7;
  margin-bottom: 5px;
}
.doc-section a { color: var(--red); }
.doc-section a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .policy-main { padding-top: 28px; padding-bottom: 60px; }
  .doc-toggle { font-size: 13px; }
  .doc-menu { min-width: 200px; right: -10px; }
}

@media (max-width: 480px) {
  .doc-toggle { font-size: 11px; gap: 3px; }
  .doc-menu { min-width: 180px; right: -12px; }
  .doc-menu a { font-size: 12px; padding: 9px 12px; }
}