/* ================================
   terms.css — responsive + scoped
   Goal:
   - Keep legal numbering structure
   - Scope styling to the Terms page only
   - Respect the global site shell from style.css
   - Reduce indentation on smaller devices
   ================================ */

/* Reset list defaults only inside Terms */
#terms .terms-style ol {
  margin: 0;
  list-style: none;
}

/* Kill native list marker behaviour */
#terms .terms-style ol li {
  display: block;
  line-height: 1.35;
}

/* Clause title look */
#terms .terms-style .clause-title {
  font-family: "Lato", Helvetica, Arial, sans-serif;
  display: block;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.02em;
  margin: 0 0 0.15em 0;
  padding: 0;
}

/* Geometry variables scoped to Terms only */
#terms .terms-style {
  --g1: 38px;  /* Level 1 marker column width */
  --g2: 38px;  /* Level 2 marker column width */
  --g3: 34px;  /* Level 3 marker column width */
  --g4: 34px;  /* Level 4 marker column width */
  --gap: 8px;  /* Space between marker and text */
  margin: 0;
}

/* Shared ::before behaviour */
#terms .terms-style ol li::before {
  position: absolute;
  top: 0;
  display: block;
  white-space: nowrap;
  box-sizing: border-box;
  padding-right: var(--gap);
  text-align: left;
}

#terms .terms-logo {
  font-family: "Corteq";
  font-size: 40px;
}

/* ================================
   LEVEL 1 (1, 2, 3...)
   ================================ */
#terms .terms-style ol.tc.level-1 {
  counter-reset: l1;
}

#terms .terms-style ol.tc.level-1 > li {
  counter-increment: l1;
  position: relative;
  padding-left: var(--g1);
  margin: 0.6em 0;
}

#terms .terms-style ol.tc.level-1 > li::before {
  content: counter(l1);
  left: 0;
  width: var(--g1);
  font-size: 18px;
  font-weight: 400;
}

/* ================================
   LEVEL 2 (1.1, 1.2...)
   Same text alignment as Level 1
   ================================ */
#terms .terms-style ol.tc.level-1 > li > ol.level-2 {
  counter-reset: l2;
}

#terms .terms-style ol.tc.level-1 > li > ol.level-2 > li {
  counter-increment: l2;
  position: relative;
  padding-left: var(--g2);
  margin: 0.35em 0;
}

#terms .terms-style ol.tc.level-1 > li > ol.level-2 > li::before {
  content: counter(l1) "." counter(l2);
  left: 0;
  width: var(--g2);
}

/* ================================
   LEVEL 3 ((a), (b)...)
   Marker aligns with Level 2 text start
   ================================ */
#terms .terms-style ol.tc.level-1 ol.level-3 {
  counter-reset: l3;
}

#terms .terms-style ol.tc.level-1 ol.level-3 > li {
  counter-increment: l3;
  position: relative;
  padding-left: var(--g3);
  margin: 0.25em 0;
}

#terms .terms-style ol.tc.level-1 ol.level-3 > li::before {
  content: "(" counter(l3, lower-alpha) ")";
  left: 0;
  width: var(--g3);
}

/* ================================
   LEVEL 4 ((i), (ii)...)
   Marker aligns with Level 3 text start
   ================================ */
#terms .terms-style ol.tc.level-1 ol.level-4 {
  counter-reset: l4;
}

#terms .terms-style ol.tc.level-1 ol.level-4 > li {
  counter-increment: l4;
  position: relative;
  padding-left: var(--g4);
  margin: 0.25em 0;
}

#terms .terms-style ol.tc.level-1 ol.level-4 > li::before {
  content: "(" counter(l4, lower-roman) ")";
  left: 0;
  width: var(--g4);
}

/* =========================================
   Responsive tightening for tablets / phones
   ========================================= */

/* Tablet-ish and below */
@media (max-width: 991px) {
  #terms .terms-style {
    --g1: 30px;
    --g2: 38px;
    --g3: 26px;
    --g4: 26px;
    --gap: 6px;
  }
}

/* Small phones */
@media (max-width: 600px) {
  #terms .terms-style {
    --g1: 24px;
    --g2: 34px;
    --g3: 20px;
    --g4: 20px;
    --gap: 4px;
  }

  #terms .terms-style ol.tc.level-1 > li {
    margin: 0.45em 0;
  }

  #terms .terms-style ol.tc.level-1 > li > ol.level-2 > li,
  #terms .terms-style ol.tc.level-1 ol.level-3 > li,
  #terms .terms-style ol.tc.level-1 ol.level-4 > li {
    margin: 0.2em 0;
  }
}