/*
 * The Terms and Conditions pages (inc/terms.php): the version panel on /terms/, the notice at
 * the top of each version, and the documents themselves.
 *
 * Loaded only on a page carrying [ballyhass_terms_versions] or [ballyhass_terms_notice].
 * Tokens only. A legal document is read, not scanned, so the text sits on a reading measure
 * and every clause can be linked to (the ids in the page content).
 */

/* ---------------------------------------------------------------------------
 * /terms/ itself, and which Terms apply: one card per version, the one in effect first
 * ------------------------------------------------------------------------- */

.bh-terms-index {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--bh-navy);
}

.bh-terms-index > :is(p, ul, h2) {
    max-width: 46rem;
}

.bh-terms-index > h2 {
    margin: var(--bh-space-8) 0 var(--bh-space-3);
    font-size: var(--bh-text-xl);
    font-weight: var(--bh-weight-bold);
}

.bh-terms-index > p,
.bh-terms-index > ul li {
    font-weight: var(--bh-weight-medium);
}

.bh-terms-index a {
    color: var(--bh-blue-text);
}

.bh-terms-versions {
    margin: 0 0 var(--bh-space-8);
}

.bh-terms-versions h2 {
    margin: 0 0 var(--bh-space-3);
    font-size: var(--bh-text-xl);
    font-weight: var(--bh-weight-bold);
    line-height: var(--bh-leading-tight);
    color: var(--bh-navy);
}

.bh-terms-versions__rule {
    max-width: 46rem;
    margin: 0 0 var(--bh-space-6);
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-medium);
    color: var(--bh-navy);
}

.bh-terms-versions__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: var(--bh-space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bh-terms-versions__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--bh-space-3);
    padding: var(--bh-space-6);
    background: var(--bh-white);
    color: var(--bh-navy);
    border: 1px solid var(--bh-line);
    border-radius: var(--bh-radius-md);
}

.bh-terms-versions__card--in-effect {
    border: 2px solid var(--bh-navy);
}

.bh-terms-versions__card h3 {
    margin: 0;
    font-size: var(--bh-text-lg);
    font-weight: var(--bh-weight-bold);
    line-height: 1.25;
}

.bh-terms-versions__card p {
    margin: 0;
    font-weight: var(--bh-weight-medium);
}

/* The status, as the brand's highlighted text: navy block, yellow text, square corners. */
.bh-terms-versions__chip {
    display: inline-block;
    padding: var(--bh-space-1) var(--bh-space-2);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: var(--bh-radius-none);
    background: var(--bh-surface-2);
    color: var(--bh-navy);
}

.bh-terms-versions__card--in-effect .bh-terms-versions__chip {
    background: var(--bh-navy);
    color: var(--bh-yellow);    /* 13.3:1 */
}

.bh-terms-versions__link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    min-height: var(--bh-target-comfortable);
    font-weight: var(--bh-weight-bold);
    color: var(--bh-blue-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bh-terms-versions__link:hover,
.bh-terms-versions__link:focus-visible {
    color: var(--bh-navy);
}

/* ---------------------------------------------------------------------------
 * The notice at the top of each version
 * ------------------------------------------------------------------------- */

.bh-terms-notice {
    max-width: 46rem;
    margin: 0 0 var(--bh-space-8);
    padding: var(--bh-space-5) var(--bh-space-6);
    background: var(--bh-surface-2);
    color: var(--bh-navy);
    border-left: 6px solid var(--bh-navy);
    border-radius: var(--bh-radius-none);
}

.bh-terms-notice--upcoming {
    border-left-color: var(--bh-blue);
}

.bh-terms-notice--ended {
    border-left-color: var(--bh-muted);
}

.bh-terms-notice p {
    margin: 0 0 var(--bh-space-3);
    font-weight: var(--bh-weight-medium);
}

.bh-terms-notice__lead {
    font-size: var(--bh-text-md);
}

.bh-terms-notice .bh-terms-notice__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2) var(--bh-space-6);
    margin-bottom: 0;
}

.bh-terms-notice__links a {
    display: inline-flex;
    align-items: center;
    min-height: var(--bh-target-min);
    font-weight: var(--bh-weight-bold);
    color: var(--bh-blue-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * The documents
 * ------------------------------------------------------------------------- */

.bh-terms-doc {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--bh-navy);
}

.bh-terms-doc :is(p, ul, ol, h2, h3, h4, dl) {
    max-width: 46rem;
}

.bh-terms-doc p,
.bh-terms-doc li {
    font-weight: var(--bh-weight-medium);
}

.bh-terms-doc h2 {
    margin: var(--bh-space-12) 0 var(--bh-space-3);
    font-size: 1.625rem;
    font-weight: var(--bh-weight-bold);
    line-height: 1.25;
}

.bh-terms-doc h3,
.bh-terms-doc h4 {
    margin: var(--bh-space-8) 0 var(--bh-space-2);
    font-size: var(--bh-text-lg);
    font-weight: var(--bh-weight-bold);
    line-height: 1.3;
}

.bh-terms-doc h4 {
    font-size: var(--bh-text-md);
}

.bh-terms-doc__group > h2 {
    padding-top: var(--bh-space-6);
    border-top: 2px solid var(--bh-line);
}

.bh-terms-doc ul,
.bh-terms-doc ol {
    padding-left: 1.25rem;
    margin-bottom: 1.25rem;
}

.bh-terms-doc li + li {
    margin-top: 0.35rem;
}

/* A clause number reads first, so a clause can be found by its number. */
.bh-terms-doc__no {
    font-weight: var(--bh-weight-bold);
}

/* Jump links and clause links land clear of the sticky header. */
.bh-terms-doc [id] {
    scroll-margin-top: 120px;
}

.bh-terms-doc__subtitle {
    margin: 0 0 var(--bh-space-4);
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-bold);
    text-transform: uppercase;
}

.bh-terms-doc__details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--bh-space-4);
    margin: 0 0 var(--bh-space-8);
    padding: var(--bh-space-5) var(--bh-space-6);
    border: 1px solid var(--bh-line);
    border-radius: var(--bh-radius-md);
}

.bh-terms-doc__details dt {
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bh-muted);
}

.bh-terms-doc__details dd {
    margin: 0;
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-bold);
}

.bh-terms-doc__preamble {
    margin-bottom: var(--bh-space-8);
}

.bh-terms-doc__contents {
    margin: 0 0 var(--bh-space-8);
    padding: var(--bh-space-5) var(--bh-space-6);
    background: var(--bh-surface-2);
    border-radius: var(--bh-radius-md);
}

.bh-terms-doc__contents h2 {
    margin-top: 0;
    font-size: var(--bh-text-lg);
}

.bh-terms-doc__contents ol,
.bh-terms-doc__contents ul {
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
    columns: 2 20rem;
    column-gap: var(--bh-space-8);
    max-width: none;
}

/* Each entry carries its own section number, so the list adds none. The current Terms'
   sections sit under their topic, indented. */
.bh-terms-doc__contents ul ul {
    columns: auto;
    padding-left: var(--bh-space-4);
    margin: var(--bh-space-1) 0 var(--bh-space-3);
}

.bh-terms-doc__contents li {
    break-inside: avoid;
}

.bh-terms-doc__contents a {
    color: var(--bh-blue-text);
    font-weight: var(--bh-weight-medium);
}

.bh-terms-doc a {
    color: var(--bh-blue-text);
    text-decoration: underline;
}

@media print {
    .bh-terms-doc__contents,
    .bh-terms-notice__links {
        display: none;
    }
}