/**
 * Legal Section CSS - Roblox-Inspired Theme
 * Applies to all files within ./law
 *
 * Inspired by Roblox's main site: flat layer UI, bold colors, playful sans-serif typography.
 */

/*==== Color Variables ====*/
:root {
  --rbx-bg: #232527;
  --rbx-card: #313336;
  --rbx-overlay: rgba(40, 42, 45, 0.95);
  --rbx-accent: #00a2ff;
  --rbx-accent-hover: #0086ce;
  --rbx-accent-active: #22d8fd;
  --rbx-nav-bg: #232527f5;
  --rbx-table-header: #28292a;
  --rbx-table-row: #232527;
  --rbx-table-even: #202124;
  --rbx-table-border: #212324;
  --rbx-badge-bg: #353a42;
  --rbx-badge-accent: #00cfff;
  --rbx-badge-text: #f2f5fa;
  --rbx-text-main: #ececec;
  --rbx-text-sub: #cfd0db;
  --rbx-shadow: 0 2px 10px 0 rgba(0,0,0,0.15), 0 1.5px 8px 0 rgba(50,100,150,0.06);
  --rbx-transition: 0.22s cubic-bezier(.5,0,.2,1);
}

/*==== General Page Styles ====*/
html, body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background: var(--rbx-bg);
  color: var(--rbx-text-main);
  font-family: 'Gotham', 'Arial Rounded MT Bold', 'Arial', sans-serif;
  font-size: 16px;
  letter-spacing: 0.01em;
}

body {
  min-height: 100vh;
  background: var(--rbx-bg) url('assets/lawbanner.png') top center no-repeat;
  background-size: cover;
  background-attachment: fixed;
  transition: background 0.3s;
  overflow-x: hidden;
}

.page {
  min-height: 100vh;
  background: var(--rbx-overlay);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 92px;
  box-sizing: border-box;
  animation: rbx-fade-in 1s;
}

@keyframes rbx-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.overlay {
  display: none;
}

/*==== Roblox-Style Top Navigation Bar ====*/
header {
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 120;
  background: var(--rbx-nav-bg);
  box-shadow: 0 1px 8px 0 rgba(0,0,0,0.20);
  animation: rbx-navdrop 0.8s cubic-bezier(.48,.15,.48,1.18);
  padding: 0 0;
  transition: background var(--rbx-transition);
}

@keyframes rbx-navdrop {
  0% { transform: translateY(-40px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

nav.animated-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.4rem;
  max-width: 890px;
  margin: 0 auto;
  font-size: 1.16rem;
  transition: background var(--rbx-transition);
}

nav.animated-nav a {
  color: var(--rbx-text-main);
  text-decoration: none;
  font-weight: bold;
  padding: 0.49rem 1.4rem;
  margin: 0 0.08rem;
  border-radius: 11px;
  transition: color var(--rbx-transition), background var(--rbx-transition), box-shadow .14s;
  position: relative;
  background: transparent;
  outline: none;
  letter-spacing: 0.015em;
  border: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 0.24rem;
}
nav.animated-nav a:focus, nav.animated-nav a:hover:not(.active) {
  background: var(--rbx-accent-hover);
  color: #fff;
  box-shadow: 0 3px 12px -6px var(--rbx-accent);
  outline: none;
  text-decoration: none;
}
nav.animated-nav a.active, nav.animated-nav a[aria-current="page"] {
  background: var(--rbx-accent);
  color: #fff;
  box-shadow: 0 6px 14px -8px var(--rbx-accent-active);
  font-weight: 900;
  cursor: default;
  pointer-events: none;
}
@media (max-width: 700px) {
  nav.animated-nav {
    font-size: 1em;
    gap: 0.1rem;
    padding: 0.52rem 0.15rem;
    flex-wrap: wrap;
  }
}

/*==== Robloxy Card/Section Styles ====*/
.card {
  background: var(--rbx-card);
  border-radius: 10px;
  box-shadow: var(--rbx-shadow);
  max-width: 740px;
  width: 97%;
  margin: 46px auto 34px auto;
  padding: 2.2rem 1.5rem 1.8rem 1.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: rbx-fade-in-up 0.7s cubic-bezier(.55,.18,.35,1.08);
}

@keyframes rbx-fade-in-up {
  0% { opacity: 0; transform: translateY(24px);}
  100% { opacity: 1; transform: translateY(0);}
}

/*==== Avatar ====*/
.avatar {
  display: block;
  width: 82px;
  height: 82px;
  object-fit: cover;
  border-radius: 16px;
  margin: 0 auto -8px auto;
  box-shadow: 0 2px 9px 0 rgba(0,0,0,0.21);
  background: #1b1c1f;
  border: 2.5px solid var(--rbx-accent);
  transition: transform .18s;
}
.avatar:hover {
  transform: scale(1.045) rotate(-2deg);
}

/*==== Headings ====*/
h1 {
  text-align: center;
  margin-top: 15px;
  margin-bottom: 13px;
  font-size: 2.3rem;
  font-weight: 900;
  letter-spacing: 0.8px;
  color: var(--rbx-accent);
  text-shadow: 0 2px 15px rgba(0,220,255,.11);
}
h2 {
  color: var(--rbx-accent-active);
  font-size: 1.33rem;
  margin-bottom: 0.76em;
  font-weight: 800;
  letter-spacing: .6px;
  text-align: center;
}
h3 {
  color: var(--rbx-accent-hover);
  font-size: 1.11rem;
  margin-bottom: 0.49em;
  font-weight: 700;
}

.tagline {
  text-align: center;
  color: var(--rbx-text-sub);
  margin-bottom: 30px;
  font-size: 1.07rem;
  letter-spacing: 0.03em;
}

/*==== Badges ====*/
.badges {
  display: flex;
  justify-content: center;
  gap: 0.38rem;
  margin-bottom: 19px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.badges span {
  background: var(--rbx-badge-bg);
  color: var(--rbx-badge-text);
  font-size: 0.97em;
  padding: 0.32em 1.09em 0.32em 1.09em;
  border-radius: 8px;
  letter-spacing: 0.048em;
  font-weight: 700;
  border: 1.2px solid var(--rbx-badge-accent);
  box-shadow: 0 1px 4px 0 rgba(36,60,100,0.13);
  opacity: .94;
  transition: background var(--rbx-transition);
}

/*==== In-card Links ====*/
.links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
  font-size: 1.05rem;
}
.links a {
  color: var(--rbx-accent);
  background: transparent;
  padding: 6px 12px;
  border-radius: 7px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.15s, color 0.15s;
}
.links a.active,
.links a:hover, .links a:focus {
  background: var(--rbx-accent-hover);
  color: #fff;
}

/*==== Policy Updates/Info ====*/
.updates {
  background: #222329e8;
  padding: 14px 18px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 1px 4px #0090c84a;
  color: var(--rbx-text-main);
}

/*==== Table/Dashboard Section ====*/
.dashboard-section {
  width: 100%;
  margin: 39px 0 15px 0;
  background: transparent;
  border-radius: 7px;
  box-shadow: none;
  padding: 0;
  animation: rbx-fade-in-up 0.83s cubic-bezier(0.56,0,.2,1);
}
.dashboard-section > h2 {
  margin: 0 0 9px 0;
  color: var(--rbx-accent-active);
  font-size: 1.13rem;
  font-weight: 700;
  letter-spacing: .6px;
  text-align: center;
}

.dashboard-section table {
  width: 100%;
  background: var(--rbx-card);
  color: var(--rbx-text-main);
  border-radius: 6px;
  overflow: hidden;
  margin: 0 auto 12px auto;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.99rem;
  box-shadow: 0 1px 7px 0 rgba(25,128,212,0.09);
}
.dashboard-section th, .dashboard-section td {
  padding: 0.7em 0.6em;
  border-bottom: 1.3px solid var(--rbx-table-border);
}
.dashboard-section thead tr {
  background: var(--rbx-table-header);
}
.dashboard-section th {
  color: var(--rbx-badge-text);
  font-weight: 800;
  font-size: 1em;
}
.dashboard-section tr {
  border-bottom: 1.1px solid var(--rbx-table-border);
}
.dashboard-section tr:last-child {
  border-bottom: none;
}
.dashboard-section td {
  color: var(--rbx-text-sub);
}
.dashboard-section tbody tr:nth-child(odd) {
  background: var(--rbx-table-row);
}
.dashboard-section tbody tr:nth-child(even) {
  background: var(--rbx-table-even);
}

/*==== Legend/Section Panels ====*/
.legend {
  background: #222429e2;
  border-radius: 7px;
  margin-top: 16px;
  padding: 13px 11px 11px 15px;
  font-size: 1.02rem;
  box-shadow: 0 1.5px 9px #00c2e72c;
}
.legend h3 {
  margin-top: 0;
  font-size: 1rem;
  color: var(--rbx-accent);
  font-weight: bold;
}
.legend ul,
.legend li {
  margin-left: 0;
  padding-left: 0;
}
.legend li {
  margin-bottom: 0.7em;
  list-style: disc inside;
}
.legend li ul {
  margin-top: 4px;
  margin-bottom: 4px;
  margin-left: 12px;
  padding-left: 7px;
}
.legend li ul li {
  font-size: 0.97em;
  list-style: circle inside;
  margin-bottom: 0.3em;
}
.legend b {
  color: #b1edfa;
}
.legend a {
  color: var(--rbx-accent);
  text-decoration: underline;
  font-weight: 600;
  transition: color 0.13s;
}
.legend a:hover {
  color: #57e3fd;
  text-decoration: underline;
}
.legend p, .legend b {
  margin: 0.28em 0 0.22em 0;
}

/*==== Responsive ====*/
@media (max-width: 770px) {
  .card {
    padding: 1.07rem 0.39rem 0.79rem 0.39rem;
    border-radius: 6px;
  }
  .dashboard-section table {
    font-size: 0.96rem;
  }
  .avatar {
    width: 53px;
    height: 53px;
    border-radius: 9px;
  }
  h1 {
    font-size: 1.15rem;
  }
  h2 {
    font-size: 1.01rem;
  }
  .legend {
    padding: 6px 3px 5px 6px;
    font-size: 0.93rem;
    border-radius: 4px;
  }
  .badges span {
    font-size: 0.81rem;
    border-radius: 6px;
    padding: 2px 6px 2px 6px;
  }
  nav.animated-nav {
    font-size: 0.97em;
    padding: 0.44rem 1vw;
    max-width: 99vw;
    gap: 0.03rem;
  }
}

/*==== Scrollbar Styling ====*/
::-webkit-scrollbar {
  width: 9px;
  background: #222328;
}
::-webkit-scrollbar-thumb {
  background: #00a2ff88;
  border-radius: 5px;
}

/*==== Accessibility: Focus Styles ====*/
a:focus {
  outline: 2px solid var(--rbx-accent-active);
  outline-offset: 2px;
}

/*==== Selection Styles ====*/
::selection,
body ::selection {
  background: #008ada;
  color: #fffbea;
}

/*==== Hide border highlight for focused buttons ====*/
button:focus {
  outline: none;
}

/*==== Horizontal Rule ====*/
hr {
  border: 0;
  border-top: 1.3px solid #25c8ff;
  margin: 18px 0;
}