/* ================================================================
   READYLAYER — legal.css
   Shared stylesheet for /privacy-policy, /terms, /cookies.
   Load order: after main.css only.
   All classes prefixed lgl- to avoid collision.

   Reused from main.css:
     rl-eyebrow, rl-header / nav, rl-footer-*, reveal,
     all CSS variables, Bootstrap .container
   ================================================================ */


/* ----------------------------------------------------------------
   HERO  (dark, narrow — no decorative glow needed on legal pages)
   ---------------------------------------------------------------- */
.lgl-hero {
  background: var(--rl-near-black);
  padding:    120px 0 64px;
  border-bottom: 1px solid rgba(200,80,42,.15);
}

.lgl-hero-inner { max-width: 680px; }

.lgl-hero-h1 {
  font-family:    var(--rl-font-display);
  font-size:      clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight:    800;
  color:          var(--rl-off-white);
  line-height:    1.15;
  letter-spacing: -0.02em;
  margin-bottom:  1rem;
  animation:      rl-fadeUp 0.7s ease forwards;
}

.lgl-hero-meta {
  display:     flex;
  align-items: center;
  gap:         1.5rem;
  flex-wrap:   wrap;
  animation:   rl-fadeUp 0.7s 0.1s ease forwards;
}

.lgl-hero-date {
  font-family:    var(--rl-font-mono);
  font-size:      0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          rgba(245,242,236,.3);
}

.lgl-hero-links {
  display:     flex;
  align-items: center;
  gap:         1rem;
}

.lgl-hero-links a {
  font-family:     var(--rl-font-mono);
  font-size:       0.62rem;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  color:           rgba(245,242,236,.3);
  text-decoration: none;
  transition:      color 0.2s;
}
.lgl-hero-links a:hover        { color: var(--rl-off-white); }
.lgl-hero-links a.is-current   { color: rgba(200,80,42,.8); pointer-events: none; }
.lgl-hero-links-sep { color: rgba(245,242,236,.12); font-size: 0.6rem; }


/* ----------------------------------------------------------------
   CONTENT BODY
   ---------------------------------------------------------------- */
.lgl-body {
  background: var(--rl-off-white);
  padding:    80px 0 100px;
}

/* Narrow prose column */
.lgl-content {
  max-width: 760px;
}

/* Section divider */
.lgl-section {
  padding-top:    3rem;
  border-top:     1px solid var(--rl-border);
  margin-top:     3rem;
}
.lgl-section:first-child {
  padding-top: 0;
  border-top:  none;
  margin-top:  0;
}

/* Headings */
.lgl-content h2 {
  font-family:    var(--rl-font-display);
  font-size:      1.35rem;
  font-weight:    700;
  letter-spacing: -0.01em;
  color:          var(--rl-black);
  margin-bottom:  1rem;
  line-height:    1.2;
}

.lgl-content h3 {
  font-family:   var(--rl-font-display);
  font-size:     1.05rem;
  font-weight:   700;
  color:         var(--rl-black);
  margin-bottom: 0.65rem;
  margin-top:    1.75rem;
  line-height:   1.25;
}
.lgl-content h3:first-child { margin-top: 0; }

/* Body copy */
.lgl-content p {
  font-size:     0.93rem;
  color:         #3a3a3a;
  line-height:   1.85;
  margin-bottom: 1rem;
}
.lgl-content p:last-child { margin-bottom: 0; }

/* Links within prose */
.lgl-content a {
  color:                  var(--rl-accent);
  text-decoration:        none;
  border-bottom:          1px solid rgba(200,80,42,.3);
  transition:             border-color 0.2s;
}
.lgl-content a:hover { border-color: var(--rl-accent); }

/* Lists */
.lgl-content ul,
.lgl-content ol {
  font-size:     0.93rem;
  color:         #3a3a3a;
  line-height:   1.85;
  margin-bottom: 1rem;
  padding-left:  1.4rem;
}
.lgl-content li { margin-bottom: 0.35rem; }
.lgl-content li:last-child { margin-bottom: 0; }

/* Section number / label prefix */
.lgl-section-num {
  font-family:    var(--rl-font-mono);
  font-size:      0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--rl-mid);
  display:        block;
  margin-bottom:  0.5rem;
}

/* Placeholder highlight — visible in dev, remove before launch */
.lgl-placeholder {
  background:    rgba(200,80,42,.12);
  border:        1px dashed rgba(200,80,42,.4);
  padding:       0 0.3rem;
  border-radius: 2px;
  font-style:    normal;
}

/* Info / notice box */
.lgl-notice {
  background:  var(--rl-warm);
  border:      1px solid var(--rl-border);
  border-left: 3px solid var(--rl-accent);
  padding:     1.1rem 1.4rem;
  margin:      1.5rem 0;
}
.lgl-notice p {
  font-size:     0.85rem;
  margin-bottom: 0;
  color:         var(--rl-mid);
}
.lgl-notice strong { color: var(--rl-black); }

/* Definition list (for rights, etc.) */
.lgl-defs { margin-bottom: 1rem; }
.lgl-def  { margin-bottom: 1.1rem; }
.lgl-def:last-child { margin-bottom: 0; }
.lgl-def-term {
  font-size:     0.88rem;
  font-weight:   600;
  color:         var(--rl-black);
  margin-bottom: 0.2rem;
  display:       block;
}
.lgl-def-desc {
  font-size:   0.88rem;
  color:       #3a3a3a;
  line-height: 1.75;
  display:     block;
  padding-left: 1rem;
  border-left: 2px solid var(--rl-border);
}


/* ----------------------------------------------------------------
   COOKIE TABLE
   ---------------------------------------------------------------- */
.lgl-table-wrap {
  overflow-x:    auto;
  margin-bottom: 1.5rem;
  border:        1px solid var(--rl-border);
}

.lgl-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       0.82rem;
  background:      var(--rl-warm);
}

.lgl-table thead tr {
  background:    var(--rl-near-black);
  border-bottom: 2px solid rgba(200,80,42,.3);
}

.lgl-table thead th {
  font-family:    var(--rl-font-mono);
  font-size:      0.58rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          rgba(245,242,236,.5);
  padding:        0.85rem 1rem;
  text-align:     left;
  white-space:    nowrap;
  font-weight:    500;
}

.lgl-table tbody td {
  padding:       0.75rem 1rem;
  border-bottom: 1px solid var(--rl-border);
  vertical-align: top;
  line-height:   1.55;
  color:         #3a3a3a;
}
.lgl-table tbody tr:last-child td { border-bottom: none; }
.lgl-table tbody tr:hover td { background: var(--rl-off-white); }

/* Cookie name column — monospace */
.lgl-table td:first-child {
  font-family: var(--rl-font-mono);
  font-size:   0.75rem;
  color:       var(--rl-black);
  white-space: nowrap;
}

/* Category badge in table */
.lgl-tbl-cat {
  display:        inline-block;
  font-family:    var(--rl-font-mono);
  font-size:      0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding:        0.15rem 0.5rem;
  border-radius:  2px;
}
.lgl-tbl-cat--necessary { background: rgba(42,107,74,.1);  color: var(--rl-l3); border: 1px solid rgba(42,107,74,.2); }
.lgl-tbl-cat--analytics { background: rgba(42,92,139,.1);  color: var(--rl-l2); border: 1px solid rgba(42,92,139,.2); }
.lgl-tbl-cat--behaviour { background: rgba(107,63,139,.1); color: var(--rl-l4); border: 1px solid rgba(107,63,139,.2); }
.lgl-tbl-cat--crm       { background: rgba(200,80,42,.1);  color: var(--rl-l1); border: 1px solid rgba(200,80,42,.2); }


/* ----------------------------------------------------------------
   FOOTER NAV (links to other legal pages, above main footer)
   ---------------------------------------------------------------- */
.lgl-footer-nav {
  background:    var(--rl-warm);
  padding:       48px 0;
  border-top:    1px solid var(--rl-border);
  border-bottom: 1px solid var(--rl-border);
}

.lgl-footer-nav-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             2rem;
  flex-wrap:       wrap;
}

.lgl-footer-nav-label {
  font-family:    var(--rl-font-mono);
  font-size:      0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--rl-mid);
}

.lgl-footer-nav-links {
  display:  flex;
  gap:      0.5rem;
  flex-wrap: wrap;
}

.lgl-footer-nav-links a {
  font-size:       0.85rem;
  color:           var(--rl-mid);
  text-decoration: none;
  padding:         0.5rem 1rem;
  border:          1px solid var(--rl-border);
  background:      var(--rl-off-white);
  transition:      all 0.2s;
}
.lgl-footer-nav-links a:hover { border-color: var(--rl-accent); color: var(--rl-accent); }


/* ----------------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .lgl-hero        { padding: 100px 0 48px; }
  .lgl-body        { padding: 48px 0 64px; }
  .lgl-footer-nav-inner { flex-direction: column; align-items: flex-start; }
  .lgl-table thead th,
  .lgl-table tbody td { padding: 0.65rem 0.75rem; }
}