/*
 * Trucking guide pages: the hub at /trucking-guides/ and its five child guides.
 * Markup: content/pages/guides/*.html, built by scripts/build-trucking-guides.py.
 * Loaded only on singular pages whose content carries class="ha-guide (functions.php).
 *
 * Two-canvas rule (decisions/2026-10-07-two-canvas-rule.md): the hero, related
 * guides, and closer are black on every guide. Article guides read on white
 * (ink body, navy H2, rust H3 and links). Interactive guides and the hub stay
 * black throughout. Tokens only; no new hex values.
 *
 * Editorial elements (standards/DESIGN-SYSTEM.md): one paragraph size, one H2
 * size and one H3 size per page, no word splitting, white underlined links on
 * black that turn --ha-link-hover, and full-border terracotta callouts.
 */

.ha-guide { box-sizing: border-box; background: var(--ha-pure-black); color: var(--ha-white); font: 400 1.0625rem/1.7 var(--font-body); -webkit-font-smoothing: antialiased; hyphens: manual; overflow-wrap: normal; word-break: normal; }
.ha-guide *, .ha-guide *::before, .ha-guide *::after { box-sizing: border-box; }
.ha-guide h1, .ha-guide h2, .ha-guide h3, .ha-guide h4 { margin: 0; text-transform: none; text-wrap: balance; }
.ha-guide p { margin: 0; font-size: 1.0625rem; }
.ha-guide img { max-width: 100%; }
.ha-guide :focus-visible { outline: 3px solid var(--ha-white); outline-offset: 4px; }
.ha-guide__frame { width: 100%; max-width: var(--ha-frame); margin-inline: auto; padding-inline: var(--ha-gutter); }
.ha-guide .ha-tg__frame { padding-inline: 0; }
.ha-guide__narrow > * { max-width: 54rem; }

/* Hero: black on every guide. */
.ha-guide__hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem); background: var(--ha-pure-black); border-bottom: 1px solid var(--ha-hairline); }
.ha-guide__hero-copy { max-width: 54rem; }
.ha-guide__hero--media .ha-guide__hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.ha-guide__hero-media { margin: 0; }
.ha-guide__hero-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--ha-line-on-dark); border-radius: var(--ha-radius-card); }
.ha-guide__crumbs ol { display: flex; flex-wrap: wrap; gap: .25rem .6rem; margin: 0 0 1.5rem; padding: 0; list-style: none; font-size: .9375rem; line-height: 1.5; }
.ha-guide__crumbs li { display: inline-flex; align-items: center; gap: .6rem; color: var(--ha-white); }
.ha-guide__crumbs li + li::before { content: ""; width: .75rem; height: .75rem; background: var(--ha-rust-lift); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.ha-guide__crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ha-white); text-decoration: underline; text-underline-offset: 5px; }
.ha-guide__h1 { color: var(--ha-white); font: 700 clamp(2.4rem, 5vw, 4.25rem)/1.08 var(--font-heading); letter-spacing: -.02em; }
.ha-guide__hero--media .ha-guide__h1 { font-size: clamp(2.4rem, 4.2vw, 3.75rem); }
.ha-guide__lede { margin-top: 1.25rem !important; color: var(--ha-white); }

/* White reading body for article guides, with a sticky contents menu. */
.ha-guide__read { padding-block: clamp(3rem, 7vw, 5.5rem); background: var(--ha-white); color: var(--ha-black); }
.ha-guide__read-grid { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 46rem); gap: clamp(2rem, 5vw, 5rem); justify-content: center; align-items: start; }
.ha-guide__toc { position: sticky; top: calc(var(--ha-header-h) + 24px); padding: 1.25rem 1.25rem 1rem; border: 1px solid var(--color-border); border-radius: var(--ha-radius-card); }
body.admin-bar .ha-guide__toc { top: calc(var(--ha-header-h) + 56px); }
.ha-guide .ha-guide__toc-title { color: var(--ha-navy); font: 600 1.15rem/1.3 var(--font-heading); }
.ha-guide__toc ol { margin: .75rem 0 0; padding: 0; list-style: none; }
.ha-guide__toc li { border-top: 1px solid var(--color-border); }
.ha-guide__toc li:first-child { border-top: 0; }
.ha-guide__toc a { display: block; padding: .6rem 0; color: var(--ha-black); font-size: .9375rem; line-height: 1.4; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ha-guide__toc a:hover,
.ha-guide__toc a:focus-visible { color: var(--ha-rust); }

.ha-guide__body { min-width: 0; color: var(--ha-black); }
.ha-guide__body section { scroll-margin-top: calc(var(--ha-header-h) + 24px); }
.ha-guide__body section + section { margin-top: clamp(2.75rem, 5vw, 4rem); }
.ha-guide__body [id] { scroll-margin-top: calc(var(--ha-header-h) + 24px); }
.ha-guide__body h2 { color: var(--ha-navy); font: 600 clamp(1.85rem, 3.2vw, 2.75rem)/1.18 var(--font-heading); letter-spacing: -.01em; }
.ha-guide__body h3 { margin-top: 2.25rem; color: var(--ha-rust); font: 600 clamp(1.3rem, 2vw, 1.5rem)/1.3 var(--font-heading); }
.ha-guide__body h4 { color: var(--ha-black); font: 600 1.15rem/1.35 var(--font-heading); }
.ha-guide__body p,
.ha-guide__body ul,
.ha-guide__body ol { margin: 1.1rem 0 0; color: var(--ha-black); }
.ha-guide__body h2 + p,
.ha-guide__body h2 + .ha-guide__table,
.ha-guide__body h2 + .ha-guide__faq { margin-top: 1.25rem; }
.ha-guide__body ul,
.ha-guide__body ol { padding-left: 1.4rem; }
.ha-guide__body li + li { margin-top: .45rem; }
.ha-guide__body li::marker { color: var(--ha-rust); }
.ha-guide__body a { color: var(--ha-rust); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ha-guide__body a:hover,
.ha-guide__body a:focus-visible { color: var(--ha-navy); }
.ha-guide__body :focus-visible { outline-color: var(--ha-navy); }
.ha-guide__intro { margin-top: 0 !important; }
.ha-guide__intro + section { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

.ha-guide__table { margin-top: 1.5rem; overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--ha-radius-card); }
.ha-guide__table:focus-visible { outline: 3px solid var(--ha-navy); outline-offset: 3px; }
.ha-guide__table table { width: 100%; min-width: 34rem; margin: 0; border-collapse: collapse; font-size: 1rem; line-height: 1.55; }
/* Table title > column headers > row text. */
.ha-guide__table caption { padding: 1rem 1.1rem .25rem; color: var(--ha-navy); font: 600 1.15rem/1.35 var(--font-heading); text-align: left; caption-side: top; }
.ha-guide__table th,
.ha-guide__table td { padding: .85rem 1.1rem; border: 0; border-top: 1px solid var(--color-border); color: var(--ha-black); text-align: left; vertical-align: top; }
.ha-guide__table thead th { border-top: 0; border-bottom: 2px solid var(--ha-navy); color: var(--ha-navy); font-size: 1.0625rem; font-weight: 600; white-space: nowrap; }
.ha-guide__table tbody tr:first-child th,
.ha-guide__table tbody tr:first-child td { border-top: 0; }
.ha-guide__table tbody th { font-weight: 600; }
.ha-guide__table th a { display: inline-block; }
.ha-guide__cite { white-space: nowrap; }

.ha-guide__callout { margin-top: 1.75rem; padding: clamp(1.25rem, 2.6vw, 1.75rem); border: 2px solid var(--ha-terracotta); border-radius: var(--ha-radius-card); }
.ha-guide__callout > :first-child { margin-top: 0 !important; }
.ha-guide__callout h4 + p { margin-top: .6rem; }

/* FAQ: on white inside articles, on black on interactive pages. */
.ha-guide__faq { margin-top: 1.25rem; border-bottom: 1px solid var(--color-border); }
.ha-guide__faq-item { border-top: 1px solid var(--color-border); }
.ha-guide__faq-item summary { position: relative; display: block; min-height: 48px; padding: 1.2rem 3rem 1.2rem 0; color: var(--ha-navy); font: 600 clamp(1.1rem, 1.7vw, 1.25rem)/1.4 var(--font-heading); list-style: none; cursor: pointer; transition: color .4s var(--ha-ease); }
.ha-guide__faq-item summary::-webkit-details-marker { display: none; }
.ha-guide__faq-item summary::after { content: ""; position: absolute; right: .6rem; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: var(--ha-rust); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .4s var(--ha-ease); }
.ha-guide__faq-item[open] summary::after { transform: rotate(180deg); }
.ha-guide__faq-item summary:hover { color: var(--ha-rust); }
.ha-guide__faq-answer { padding: 0 3rem 1.4rem 0; }
.ha-guide__faq-answer p { margin-top: 0; }

/* Static sections after an interactive module: black, charcoal cards. */
.ha-guide__extra,
.ha-guide__hub { padding-block: var(--ha-band); background: var(--ha-pure-black); border-top: 1px solid var(--ha-hairline); }
.ha-guide__hub + .ha-guide__hub { padding-top: 0; border-top: 0; }
.ha-guide__extra h2,
.ha-guide__hub h2,
.ha-guide__related h2 { color: var(--ha-white); font: 600 clamp(1.85rem, 3.2vw, 2.75rem)/1.18 var(--font-heading); letter-spacing: -.01em; }
.ha-guide__extra h2 ~ h2 { margin-top: clamp(3rem, 6vw, 4.5rem); }
.ha-guide__extra-lede,
.ha-guide__hub .ha-guide__frame > p { max-width: 54rem; margin-top: 1rem !important; color: var(--ha-white); line-height: 1.7; }
.ha-guide__extra-after { max-width: 54rem; margin-top: 1.5rem !important; color: var(--ha-white); }
.ha-guide__hub .ha-guide__frame > p a,
.ha-guide__extra a:not(.ha-guide__card) { color: var(--ha-white); text-decoration: underline; text-underline-offset: 5px; }
/* Links on black: white text and underline, both --ha-link-hover on hover and focus. */
.ha-guide__crumbs a:hover,
.ha-guide__crumbs a:focus-visible,
.ha-guide__hub .ha-guide__frame > p a:hover,
.ha-guide__hub .ha-guide__frame > p a:focus-visible,
.ha-guide__extra a:not(.ha-guide__card):hover,
.ha-guide__extra a:not(.ha-guide__card):focus-visible,
.ha-guide__all a:hover,
.ha-guide__all a:focus-visible { color: var(--ha-link-hover); }
.ha-guide__cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(2rem, 4vw, 3rem); }
.ha-guide__case { padding: clamp(1.25rem, 2.4vw, 2rem); background: var(--ha-charcoal); border: 1px solid var(--ha-line-on-dark); border-radius: var(--ha-radius-card); }
.ha-guide__case h3 { color: var(--ha-white); font: 600 1.5rem/1.25 var(--font-heading); }
.ha-guide__case > p { margin-top: .75rem; color: var(--ha-white); line-height: 1.65; }
.ha-guide__case h4 { margin-top: 1.4rem; color: var(--ha-white); font: 600 1.0625rem/1.4 var(--font-body); }
.ha-guide__case ul { margin: .5rem 0 0; padding: 0; list-style: none; }
.ha-guide__case li { position: relative; padding: .55rem 0 .55rem 1.4rem; border-top: 1px solid var(--ha-hairline); color: var(--ha-white); line-height: 1.55; }
.ha-guide__case li:first-child { border-top: 0; }
.ha-guide__case li::before { content: ""; position: absolute; left: .15rem; top: 1.1rem; width: .45rem; height: .45rem; border-radius: 2px; background: var(--ha-rust-card); }

.ha-guide__extra .ha-guide__table,
.ha-guide__extra .ha-guide__faq { border-color: var(--ha-line-on-dark); }
.ha-guide__extra .ha-guide__table { margin-top: clamp(2rem, 4vw, 3rem); background: var(--ha-charcoal); }
.ha-guide__extra .ha-guide__table th,
.ha-guide__extra .ha-guide__table td { border-top-color: var(--ha-hairline); color: var(--ha-white); }
.ha-guide__extra .ha-guide__table thead th { border-bottom-color: var(--ha-rust-lift); color: var(--ha-white); }
.ha-guide__extra .ha-guide__table:focus-visible { outline-color: var(--ha-white); }
.ha-guide__extra .ha-guide__faq { max-width: 54rem; margin-top: 1.5rem; }
.ha-guide__extra .ha-guide__faq-item { border-top-color: var(--ha-hairline); }
.ha-guide__extra .ha-guide__faq-item summary { color: var(--ha-white); }
.ha-guide__extra .ha-guide__faq-item summary::after { border-color: var(--ha-rust-lift); }
.ha-guide__extra .ha-guide__faq-item summary:hover { color: var(--ha-link-hover); }
.ha-guide__extra .ha-guide__faq-answer p { color: var(--ha-white); }

/* Guide cards: the related band and the hub listing. */
.ha-guide__related { padding-block: var(--ha-band); background: var(--ha-pure-black); border-top: 1px solid var(--ha-hairline); }
.ha-guide__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.75rem, 1.6vw, 1.25rem); margin-top: clamp(2rem, 4vw, 3rem); }
.ha-guide__cards--hub { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ha-guide__card { display: flex; flex-direction: column; gap: .6rem; min-width: 0; padding: .75rem .75rem 1.25rem; background: var(--ha-charcoal); border: 1px solid var(--ha-line-on-dark); border-radius: var(--ha-radius-card); color: var(--ha-white); text-decoration: none !important; transition: transform .45s var(--ha-ease), border-color .45s var(--ha-ease), box-shadow .45s var(--ha-ease); }
.ha-guide__card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--ha-radius-control); }
.ha-guide__card-title { padding-inline: .35rem; color: var(--ha-white); font: 600 1.2rem/1.3 var(--font-heading); }
.ha-guide__card-text { padding-inline: .35rem; color: var(--ha-white); line-height: 1.55; }
.ha-guide__card:hover { transform: translateY(-6px); border-color: var(--ha-rust-lift); box-shadow: 0 30px 60px rgba(0, 0, 0, .6); color: var(--ha-white); }
.ha-guide__card:focus-visible { outline: 3px solid var(--ha-white); outline-offset: 4px; }
.ha-guide__all { margin-top: clamp(1.5rem, 3vw, 2rem) !important; }
.ha-guide__all a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ha-white); font-weight: 600; text-decoration: underline; text-underline-offset: 5px; }

/* Closer: black on every guide. */
.ha-guide__closer { padding-block: var(--ha-band); background: var(--ha-pure-black); border-top: 1px solid var(--ha-hairline); text-align: center; }
.ha-guide__closer h2 { color: var(--ha-white); font: 600 clamp(1.85rem, 3.2vw, 2.75rem)/1.18 var(--font-heading); letter-spacing: -.01em; }
.ha-guide__closer p { margin-top: 1rem; color: var(--ha-white); }
.ha-guide__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; margin-top: 2rem; }
.ha-guide__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: .85rem 1.6rem; background: var(--ha-terracotta); border: 1px solid var(--ha-terracotta); border-radius: var(--ha-radius-control); color: var(--ha-white) !important; font: 600 1rem/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase; text-decoration: none !important; transition: background-color .4s var(--ha-ease), border-color .4s var(--ha-ease); }
.ha-guide__btn:hover { background: var(--ha-rust); border-color: var(--ha-rust); }
.ha-guide__btn--ghost { background: transparent; border-color: var(--ha-white); }
.ha-guide__btn--ghost:hover { background: var(--ha-terracotta); border-color: var(--ha-terracotta); }
.ha-guide__note { max-width: 46rem; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0 !important; padding-top: 1.5rem; border-top: 1px solid var(--ha-hairline); line-height: 1.6; }

/* Interactive modules sit flush between the hero and the static sections. */
.ha-guide .ha-tg { border-top: 0; }

@media (max-width: 1024px) {
	.ha-guide__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.ha-guide__hero--media .ha-guide__hero-grid { grid-template-columns: minmax(0, 1fr); }
	.ha-guide__read-grid { grid-template-columns: minmax(0, 1fr); }
	.ha-guide__toc { display: none; }
	.ha-guide__cases,
	.ha-guide__cards--hub { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
	.ha-guide__crumbs li:last-child:not(:first-child) { display: none; }
	.ha-guide__cards { grid-template-columns: minmax(0, 1fr); }
	.ha-guide__faq-item summary { padding-right: 2.25rem; }
	.ha-guide__faq-answer { padding-right: 0; }
	.ha-guide__actions .ha-guide__btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.ha-guide__card,
	.ha-guide__btn,
	.ha-guide__faq-item summary,
	.ha-guide__faq-item summary::after { transition: none; }
	.ha-guide__card:hover { transform: none; }
}

/* Guide pages: let the bands run full bleed (mirrors the .ha-home reset). */
body.ha-guide-page,
body.ha-guide-page #page,
body.ha-guide-page .site-content { background: var(--ha-pure-black); color: var(--ha-white); }
body.ha-guide-page .site-content .ast-container,
body.ha-guide-page #primary,
body.ha-guide-page .site-main,
body.ha-guide-page article.page,
body.ha-guide-page .entry-content { width: 100%; max-width: none; margin: 0; padding: 0; }
body.ha-guide-page .entry-content > .ha-guide,
body.ha-guide-page .entry-content .ha-tg { max-width: none; width: 100%; margin: 0; }