/* Articles: guides, glossary, questions, service, trust and legal pages. */

.content-page {
    display: grid;
    gap: var(--space-6);
}

.content-page > * {
    width: 100%;
    max-width: 48rem;
    min-width: 0;
    margin-inline: auto;
}

body:has(.content-page) .breadcrumbs ol {
    max-width: 48rem;
    margin-inline: auto;
}

/* Components that reset their own margins still sit in the reading column. */

.content-page > .faq,
.content-page > .author-line,
.content-page > .sources,
.content-page > .related-links,
.content-page > .key-facts {
    margin-inline: auto;
}

.content-page > .hero h1 {
    max-width: none;
}

.content-page > .hero .lead {
    max-width: none;
    color: var(--color-text);
}

.content-body {
    font-size: 1.0625rem;
    line-height: 1.75;
}

.content-body > * + * {
    margin-top: var(--space-4);
}

.content-body > :first-child {
    margin-top: 0;
}

.content-body p,
.content-body ul,
.content-body ol {
    margin-bottom: 0;
}

.content-body h2 {
    margin-top: var(--space-7);
    padding-top: var(--space-2);
    line-height: 1.25;
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

.content-body h3 {
    margin-top: var(--space-6);
    line-height: 1.3;
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

.content-body h2 + *,
.content-body h3 + * {
    margin-top: var(--space-3);
}

.content-body ul,
.content-body ol {
    padding-left: 1.5rem;
}

.content-body li + li {
    margin-top: var(--space-2);
}

.content-body li::marker {
    color: var(--color-brand-deep);
    font-weight: 700;
}

.content-body blockquote {
    margin-inline: 0;
    padding: var(--space-3) var(--space-5);
    border-left: 4px solid var(--color-brand);
    background: var(--color-canvas);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.content-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.9375rem;
}

.content-body img {
    border-radius: var(--radius);
}

.content-body code {
    padding: 0.1em 0.35em;
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 0.9em;
}

.heading-permalink {
    margin-left: var(--space-2);
    color: var(--color-border-strong);
    font-weight: 400;
    text-decoration: none;
    opacity: 0;
    transition: opacity var(--speed) var(--ease);
}

.content-body :is(h2, h3):hover .heading-permalink,
.heading-permalink:focus-visible {
    opacity: 1;
    color: var(--color-brand-deep);
}

.shortcode-warning {
    padding: 0 var(--space-2);
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.estimate--empty,
.diesel-price--empty,
.carrier-count--empty,
.phone--empty,
.setting--empty {
    color: var(--color-muted);
}

.content-page > nav:not([class]) {
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}

.content-page > nav:not([class]) h2 {
    font-size: var(--step-1);
}

.content-page > nav:not([class]) ul {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.content-page > nav:not([class]) li {
    margin: 0;
}

.content-page > .author-line {
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.content-page .tool-card h2 {
    margin: 0;
    font-size: 1.0625rem;
}

.content-page .tool-card h2 a {
    color: var(--color-ink);
    text-decoration: none;
}

.content-page .tool-card h2 a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.disclosure {
    color: var(--color-muted);
    font-size: var(--step--1);
}

/* Index pages: guides, glossary, questions, services */

.content-search {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.content-search label {
    flex: 1 1 16rem;
}

.letter-index {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.letter-index a,
.letter-index span {
    display: grid;
    place-items: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-weight: 700;
    text-decoration: none;
}

.letter-index a {
    background: var(--color-surface);
    color: var(--color-ink);
}

.letter-index a:hover {
    border-color: var(--color-brand);
    background: var(--color-brand-tint);
}

.letter-index span {
    color: var(--color-border-strong);
}

.tool-card {
    margin-block: 0;
}

/* Index pages share one layout: a hero, an optional search, then cards. */

.content-index {
    display: grid;
    gap: var(--space-6);
}

.content-index > * {
    min-width: 0;
}

.content-search .field {
    flex: 1 1 14rem;
}

.content-search > button {
    flex: 0 0 auto;
}

.topic-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.topic-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    color: var(--color-ink);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
}

.topic-nav a:hover {
    background: var(--color-brand-tint);
    border-color: var(--color-brand);
}

/* Topic cards pack into columns so a short topic does not leave a tall empty card. */

.topic-grid {
    columns: 3 20rem;
    column-gap: var(--space-4);
}

.topic-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    break-inside: avoid;
    margin-bottom: var(--space-4);
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

.topic-card h2 {
    margin: 0;
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-brand);
    font-size: var(--step-1);
}

.topic-card ul {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.topic-card li {
    margin: 0;
    line-height: 1.4;
}

.topic-card li a {
    color: var(--color-ink);
    text-decoration: none;
}

.topic-card li a:hover {
    color: var(--color-brand-deep);
    text-decoration: underline;
}

.topic-card .more-link {
    margin-top: auto;
    padding-top: var(--space-2);
    font-size: 0.9375rem;
}

.glossary-list {
    display: grid;
    gap: var(--space-5);
}

.glossary-list > .list-filter {
    margin-bottom: calc(var(--space-2) * -1);
}

.glossary-letter {
    display: grid;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

.glossary-letter h2 {
    margin: 0;
    color: var(--color-brand-deep);
}

.glossary-letter ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: 0 var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.glossary-letter li {
    margin: 0;
}

/* Each term is a full-height line to tap. */

.glossary-letter a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
}

.link-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.link-cards li {
    margin: 0;
}

.link-cards a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 3.5rem;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    color: var(--color-ink);
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.link-cards a svg {
    color: var(--color-brand-deep);
}

.link-cards a:hover {
    border-color: var(--color-brand);
    box-shadow: var(--shadow-2);
    color: var(--color-brand-deep);
}

@media (min-width: 62rem) {
    .glossary-letter {
        grid-template-columns: 4rem minmax(0, 1fr);
    }
}

/* Contents list of a long article */

.toc {
    padding: var(--space-4) var(--space-5);
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-brand);
    border-radius: var(--radius);
}

.toc > h2 {
    margin: 0 0 var(--space-2);
    font-size: 1rem;
}

.toc > ol {
    display: grid;
    gap: 0;
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.9375rem;
}

.toc li {
    margin: 0;
    padding-left: var(--space-1);
}

.toc li::marker {
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
}

.toc a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--color-ink);
    text-decoration: none;
}

.toc a:hover {
    color: var(--color-brand-deep);
    text-decoration: underline;
}

/* Two columns that read down, then across. */

@media (min-width: 48rem) {
    .toc > ol {
        display: block;
        columns: 2;
        column-gap: var(--space-6);
    }

    .toc li {
        break-inside: avoid;
    }
}

/* In the reading column, facts sit two across; an odd last one spans the row. */

.content-page .key-facts dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.content-page .key-facts dl > div:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

@media (max-width: 34rem) {
    .content-page .key-facts dl {
        grid-template-columns: minmax(0, 1fr);
    }
}