/* ==========================================================================
   Terms of Use page styles.

   EVERY rule in this file is scoped to .pm-terms, the wrapper <div> around the
   page body in client/terms_conditions.php. This is load-bearing, not tidiness:
   privacy.php reuses the same .lagel__wraper / .lagel__innr__block /
   .article__block / .privacy markup and is styled from the shared main.css, so
   a bare .article__block or .section selector here would restyle that page too.
   Never write an unprefixed selector below.

   The page shell (header, banner, footer, .container) still comes from
   main.css. This file only handles the legal document itself:
     1. a fixed reading measure, so clauses no longer run the full 1400px
     2. one vertical rhythm for sections, clauses and sub-clauses
     3. a real definitions grid, replacing the unstyled <table>
     4. hanging clause numbers, replacing the &nbsp; indentation
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Document shell - reading measure and page rhythm
   -------------------------------------------------------------------------- */
.pm-terms .lagel__wraper {
    padding: 70px 0 90px;
}

.pm-terms .pm-terms__doc {
    max-width: 900px;
    margin: 0 auto;
    color: #2c3742;
    font-size: 16px;
    line-height: 1.75;
}

.pm-terms .pm-terms__doc p {
    margin-bottom: 18px;
    font-size: inherit;
    line-height: inherit;
}

.pm-terms .pm-terms__doc p:last-child {
    margin-bottom: 0;
}

.pm-terms .pm-terms__doc a {
    color: #5aa11f;
    text-decoration: underline;
    word-break: break-word;
}

.pm-terms .pm-terms__doc a:hover,
.pm-terms .pm-terms__doc a:focus {
    color: #3f7a12;
}


/* --------------------------------------------------------------------------
   2. Masthead - title and the introductory paragraph
   -------------------------------------------------------------------------- */
.pm-terms .pm-terms__masthead {
    margin-bottom: 46px;
    padding-bottom: 28px;
    border-bottom: 1px solid #e3edf2;
}

.pm-terms .pm-terms__masthead h2 {
    margin-bottom: 20px;
    font-size: 34px;
    font-weight: 500;
    line-height: 1.25;
    color: #3b4757;
}

.pm-terms .pm-terms__lead {
    margin-bottom: 0;
    color: #52606d;
}


/* --------------------------------------------------------------------------
   3. Numbered sections
   -------------------------------------------------------------------------- */
.pm-terms .pm-terms__section {
    margin-bottom: 44px;
}

.pm-terms .pm-terms__section:last-child {
    margin-bottom: 0;
}

.pm-terms .pm-terms__heading {
    display: flex;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eef4f7;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.35;
    color: #3b4757;
}

/* The section number sits in its own column so multi-line headings keep their
   text aligned under itself rather than wrapping under the number. */
.pm-terms .pm-terms__heading-no {
    flex: 0 0 auto;
    min-width: 34px;
    color: #7dc43b;
}


/* --------------------------------------------------------------------------
   4. Clauses - hanging numbers via grid

   The old markup indented with runs of &nbsp;, which collapse differently per
   browser and gave no hanging indent at all on wrapped lines. Each <li> is now
   a two-column grid: the number, then the text. --pm-no-w is the number column
   width, overridden per nesting level below.
   -------------------------------------------------------------------------- */
.pm-terms .pm-terms__clauses {
    --pm-no-w: 46px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pm-terms .pm-terms__clauses > li {
    display: grid;
    grid-template-columns: var(--pm-no-w) 1fr;
    margin-bottom: 16px;
}

.pm-terms .pm-terms__clauses > li:last-child {
    margin-bottom: 0;
}

.pm-terms .pm-terms__no {
    font-weight: 500;
    color: #7dc43b;
}

.pm-terms .pm-terms__text {
    min-width: 0;
}

/* a. b. c. lists - narrower number column, indented one step from the parent */
.pm-terms .pm-terms__clauses--alpha {
    --pm-no-w: 26px;
}

/* 3.4.1 style lists need room for five characters */
.pm-terms .pm-terms__clauses--sub {
    --pm-no-w: 54px;
}

/* Nested lists get breathing room from the sentence that introduces them. */
.pm-terms .pm-terms__text > .pm-terms__clauses {
    margin-top: 14px;
    padding-left: 8px;
}

/* Free-standing sentence inside a clause (e.g. the reservation of rights that
   follows 4.1b) - separated from the sub-list above it. */
.pm-terms .pm-terms__note {
    margin-top: 14px;
    margin-bottom: 0;
}

/* "Your obligations.", "Governing Law." and friends. Bold rather than the
   old <u>, which reads as a broken link on screen. */
.pm-terms .pm-terms__lead-in {
    font-weight: 600;
    color: #3b4757;
}


/* --------------------------------------------------------------------------
   5. Definitions list

   Was a <table> with no styling (and a stray <valign="top"> tag) whose first
   column collapsed to the width of the longest word. Now a two-column grid
   that stacks on small screens.
   -------------------------------------------------------------------------- */
.pm-terms .pm-terms__defs {
    margin: 24px 0 0;
    border: 1px solid #e3edf2;
    border-radius: 6px;
    overflow: hidden;
}

.pm-terms .pm-terms__def {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 4px 24px;
    padding: 14px 22px;
    border-top: 1px solid #eef4f7;
}

.pm-terms .pm-terms__def:first-child {
    border-top: 0;
}

.pm-terms .pm-terms__def:nth-child(odd) {
    background-color: #f8fcfe;
}

.pm-terms .pm-terms__defs dt {
    margin: 0;
    font-weight: 600;
    color: #3b4757;
}

.pm-terms .pm-terms__defs dd {
    margin: 0;
    min-width: 0;
}


/* --------------------------------------------------------------------------
   6. Responsive - breakpoints match the site's own 1199/991/767/479 scale
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 1199px) {
    .pm-terms .lagel__wraper {
        padding: 60px 0 70px;
    }
}

@media only screen and (max-width: 991px) {
    .pm-terms .pm-terms__doc {
        font-size: 15px;
    }

    .pm-terms .pm-terms__masthead h2 {
        font-size: 30px;
    }

    .pm-terms .pm-terms__heading {
        font-size: 19px;
    }

    .pm-terms .pm-terms__def {
        grid-template-columns: 200px 1fr;
        gap: 4px 18px;
    }
}

@media only screen and (max-width: 767px) {
    .pm-terms .lagel__wraper {
        padding: 40px 0 50px;
    }

    .pm-terms .pm-terms__masthead {
        margin-bottom: 32px;
        padding-bottom: 22px;
    }

    .pm-terms .pm-terms__masthead h2 {
        font-size: 26px;
    }

    .pm-terms .pm-terms__section {
        margin-bottom: 34px;
    }

    .pm-terms .pm-terms__heading {
        font-size: 18px;
    }

    .pm-terms .pm-terms__heading-no {
        min-width: 30px;
    }

    /* Term above meaning - a 200px label column leaves too little room for the
       definition text on a phone. */
    .pm-terms .pm-terms__def {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 12px 16px;
    }

    .pm-terms .pm-terms__clauses {
        --pm-no-w: 42px;
    }

    .pm-terms .pm-terms__clauses--sub {
        --pm-no-w: 48px;
    }

    .pm-terms .pm-terms__text > .pm-terms__clauses {
        padding-left: 0;
    }
}

@media only screen and (max-width: 479px) {
    .pm-terms .pm-terms__clauses {
        --pm-no-w: 38px;
    }

    .pm-terms .pm-terms__clauses--alpha {
        --pm-no-w: 24px;
    }

    .pm-terms .pm-terms__clauses--sub {
        --pm-no-w: 46px;
    }

    .pm-terms .pm-terms__defs {
        margin-top: 18px;
    }
}