/* ════════════════════════════════════════════════════════════
   LEGAL.CSS — Privacy Policy & Terms pages
   Requires: variables.css, common.css loaded first.
   ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   HERO — Page banner with bg image and dark navy overlay
   ════════════════════════════════════════════════════════════ */
#legal-hero {
  position:        relative;
  min-height:      340px;
  padding:         140px 64px 70px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  overflow:        hidden;
  isolation:       isolate;
}

#legal-hero::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: url('../images/inner-page-bg.png') center / cover no-repeat;
  z-index:    -2;
}

#legal-hero::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(180deg,
                rgba(15, 27, 61, 0.92) 0%,
                rgba(15, 27, 61, 0.88) 50%,
                rgba(15, 27, 61, 0.94) 100%);
  z-index:    -1;
}

.lh-content {
  max-width: 900px;
}

#legal-hero .section-label {
  justify-content: center;
}

.lh-title {
  font-family:    var(--font-display);
  font-size:      clamp(2.4rem, 5vw, 4rem);
  font-weight:    900;
  line-height:    1.05;
  color:          var(--white);
  margin:         14px 0 10px;
  letter-spacing: -0.01em;
}

.lh-effective {
  font-family: var(--font-body);
  font-size:   14px;
  color:       rgba(255, 255, 255, 0.65);
  margin:      0;
}


/* ════════════════════════════════════════════════════════════
   BODY — Sidebar TOC + Content
   ════════════════════════════════════════════════════════════ */
#legal-body {
  background: #F4F6FB;
  padding:    70px 64px 100px;
}

.legal-grid {
  display:               grid;
  grid-template-columns: 260px 1fr;
  gap:                   72px;
  max-width:             1240px;
  margin:                0 auto;
  align-items:           start;
}


/* ── Left sidebar (sticky TOC) ── */
.legal-toc {
  position:    sticky;
  top:         100px;
  align-self:  start;
}

.toc-label {
  font-family:    'Inter', sans-serif;
  font-size:      11px;
  font-weight:    700;
  color:          var(--coral);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom:  20px;
}

.toc-list {
  list-style: none;
  padding:    0;
  margin:     0;
}

.toc-list li { margin-bottom: 8px; }

.toc-list a {
  display:         flex;
  align-items:     flex-start;
  gap:             14px;
  padding:         8px 0;
  font-family:     'Inter', sans-serif;
  font-size:       13px;
  font-weight:     500;
  line-height:     1.4;
  color:           var(--text-soft);
  text-decoration: none;
  transition:      color 0.2s ease, padding-left 0.25s ease;
  border-left:     2px solid transparent;
  padding-left:    12px;
}

.toc-list a .toc-num {
  font-family:  'Inter', sans-serif;
  font-size:    11px;
  font-weight:  800;
  color:        var(--coral);
  flex-shrink:  0;
  min-width:    18px;
}

.toc-list a:hover,
.toc-list a.is-active {
  color:        var(--navy);
  border-color: var(--coral);
}


/* ── Right content column ── */
.legal-content {
  display:        flex;
  flex-direction: column;
  gap:            20px;
}


/* ── Welcome card (navy intro) ── */
.legal-welcome {
  background:    var(--navy);
  color:         var(--white);
  border-radius: 14px;
  padding:       28px 32px;
  display:       flex;
  align-items:   flex-start;
  gap:           18px;
  box-shadow:    0 12px 32px rgba(15, 27, 61, 0.12);
}

.legal-welcome-icon {
  flex-shrink:     0;
  width:           42px;
  height:          42px;
  border-radius:   10px;
  background:      rgba(255, 255, 255, 0.08);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       18px;
  color:           var(--sun);
}

.legal-welcome h2 {
  font-family:   var(--font-display);
  font-size:     1.4rem;
  font-weight:   900;
  color:         var(--white);
  margin:        0 0 10px;
  line-height:   1.2;
}

.legal-welcome p {
  font-family: 'Inter', sans-serif;
  font-size:   14px;
  line-height: 1.65;
  color:       rgba(255, 255, 255, 0.78);
  margin:      0;
}


/* ── Section card ── */
.legal-card {
  background:    var(--white);
  border-radius: 14px;
  padding:       28px 32px 32px;
  box-shadow:    0 8px 24px rgba(15, 27, 61, 0.06);
}

.legal-card-head {
  display:        flex;
  align-items:    center;
  gap:            12px;
  margin-bottom:  18px;
  padding-bottom: 14px;
  border-bottom:  1px solid #F0F2F7;
}

.legal-num {
  width:           34px;
  height:          34px;
  border-radius:   50%;
  background:      #FFE6E0;
  color:           var(--coral);
  font-family:     'Inter', sans-serif;
  font-size:       11px;
  font-weight:     900;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.legal-card-icon {
  font-size:   18px;
  line-height: 1;
  flex-shrink: 0;
}

.legal-card h3 {
  font-family: var(--font-display);
  font-size:   1.2rem;
  font-weight: 900;
  color:       var(--navy);
  margin:      0;
  line-height: 1.2;
}

.legal-card p {
  font-family: 'Inter', sans-serif;
  font-size:   14px;
  line-height: 1.7;
  color:       var(--text-soft);
  margin:      0 0 12px;
}
.legal-card p:last-child { margin-bottom: 0; }

.legal-card h4 {
  font-family:    'Inter', sans-serif;
  font-size:      14px;
  font-weight:    800;
  color:          var(--navy);
  margin:         0 0 12px;
  letter-spacing: 0.01em;
}

/* Two-column block (Personal Information / Website Information etc.) */
.legal-twocol {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   28px;
  margin-top:            8px;
}

/* Bullet list with coral dots */
.legal-list {
  list-style: none;
  padding:    0;
  margin:     8px 0 0;
}

.legal-list li {
  font-family:  'Inter', sans-serif;
  font-size:    14px;
  font-weight:  400;
  line-height:  1.55;
  color:        var(--text-soft);
  padding-left: 20px;
  margin-bottom: 10px;
  position:     relative;
}
.legal-list li::before {
  content:       '';
  position:      absolute;
  left:          0;
  top:           7px;
  width:         7px;
  height:        7px;
  background:    var(--coral);
  border-radius: 50%;
}
.legal-list li:last-child { margin-bottom: 0; }

/* Contact label rows inside Contact Us card */
.legal-contact-row {
  font-family: 'Inter', sans-serif;
  font-size:   14px;
  line-height: 1.7;
  color:       var(--text-soft);
}
.legal-contact-row strong {
  font-weight: 700;
  color:       var(--navy);
  margin-right: 4px;
}


/* ── Closing callout (Privacy Matters / Our Commitment) ── */
.legal-callout {
  background:    var(--cream);
  border:        2px solid var(--sun);
  border-radius: 14px;
  padding:       24px 28px;
  display:       flex;
  align-items:   flex-start;
  gap:           16px;
  margin-top:    12px;
}

.legal-callout-icon {
  font-size:   24px;
  line-height: 1;
  flex-shrink: 0;
}

.legal-callout h4 {
  font-family: var(--font-display);
  font-size:   1.15rem;
  font-weight: 900;
  color:       var(--navy);
  margin:      0 0 8px;
}

.legal-callout p {
  font-family: 'Inter', sans-serif;
  font-size:   14px;
  line-height: 1.65;
  color:       var(--text-soft);
  margin:      0;
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  #legal-body { padding: 50px 32px 80px; }

  .legal-grid {
    grid-template-columns: 1fr;
    gap:                   36px;
  }

  /* TOC becomes a static block above the content on tablet */
  .legal-toc {
    position:      static;
    background:    var(--white);
    border-radius: 14px;
    padding:       22px 26px;
    box-shadow:    0 8px 24px rgba(15, 27, 61, 0.06);
  }
}

@media (max-width: 768px) {
  #legal-hero { padding: 110px 24px 60px; min-height: 280px; }
  #legal-body { padding: 40px 18px 70px; }

  .legal-card     { padding: 22px 22px 24px; }
  .legal-welcome  { padding: 22px 22px; }
  .legal-twocol   { grid-template-columns: 1fr; gap: 22px; }
}