/* Shared layout for public informational/legal pages — reuses the
   design tokens and .site-header/.site-footer from base.css and
   homepage.css. This file covers long-form content: article
   typography, breadcrumbs, and the resource-hub grid. */

.page-hero {
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--border);
}
.page-hero .eyebrow { margin-bottom: 14px; display: inline-block; }
.page-hero h1 { font-size: 34px; line-height: 1.2; color: var(--text-primary); margin: 0 0 14px; letter-spacing: -0.01em; }
.page-hero .lede { font-size: 16px; line-height: 1.6; color: var(--text-secondary); max-width: 640px; }

.breadcrumbs { font-size: 12.5px; color: var(--text-tertiary); margin-bottom: 18px; }
.breadcrumbs a { color: var(--text-tertiary); text-decoration: none; }
.breadcrumbs a:hover { color: var(--text-secondary); }
.breadcrumbs .sep { margin: 0 6px; }

.content-body {
  padding: 48px 0 72px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-secondary);
}
/* .content-column: caps a comfortable reading width WITHOUT its own
   auto-centering — it stays flush against whatever left edge its
   parent .container already established, so body copy lines up with
   the hero above it instead of floating as its own centered island.
   This is the reusable pattern for any page that wants a narrower
   readable column inside the standard full-width .container. */
.content-column { max-width: 720px; }
.content-body h2 {
  font-size: 21px;
  color: var(--text-primary);
  margin: 40px 0 14px;
  letter-spacing: -0.005em;
}
.content-body h2:first-child { margin-top: 0; }
.content-body h3 {
  font-size: 16.5px;
  color: var(--text-primary);
  margin: 28px 0 10px;
}
.content-body p { margin: 0 0 16px; color: var(--text-secondary); }
.content-body ul, .content-body ol { margin: 0 0 16px; padding-left: 22px; color: var(--text-secondary); }
.content-body li { margin-bottom: 7px; }
.content-body a:not(.btn) { color: var(--blue-bright); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 2px; }
.content-body a:not(.btn):hover { text-decoration-color: var(--blue-bright); }
.content-body strong { color: var(--text-primary); font-weight: 600; }
.content-body code { font-family: var(--font-data); font-size: 0.9em; background: var(--bg-raised); padding: 1px 5px; border-radius: 4px; }

.content-note {
  border-left: 3px solid var(--border-strong);
  padding: 12px 16px;
  margin: 24px 0;
  background: var(--bg-raised);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 14px;
  color: var(--text-secondary);
}
.content-note strong { color: var(--text-primary); }

.content-cta {
  margin: 40px 0 8px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.content-cta p { margin: 0; color: var(--text-primary); font-size: 15px; }
.content-cta .btn { flex-shrink: 0; }

.legal-meta { font-size: 13px; color: var(--text-tertiary); margin-bottom: 32px; }

.related-reading {
  margin: 32px 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.related-reading h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  margin: 0 0 10px;
}
.related-reading ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.related-reading a { font-size: 14.5px; }

/* Resource hub grid (freight-intelligence.html) */
.resource-grid { padding: 40px 0 72px; }
.resource-grid .container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.resource-card {
  display: block;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: border-color 0.15s ease;
}
.resource-card:hover { border-color: var(--blue); }
.resource-card h2 { color: var(--text-primary); font-size: 17px; margin: 0 0 8px; }
.resource-card p { color: var(--text-secondary); font-size: 14px; line-height: 1.55; margin: 0; }
.resource-card .tag { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); margin-bottom: 10px; }

/* How It Works numbered steps */
.hiw-steps { padding: 40px 0 72px; }
.hiw-steps .content-column { display: flex; flex-direction: column; gap: 4px; }
.hiw-step { display: flex; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--border); }
.hiw-step:last-child { border-bottom: none; }
.hiw-num { font-family: var(--font-data); font-size: 20px; color: var(--blue-bright); font-weight: 600; flex-shrink: 0; width: 32px; }
.hiw-step h2 { color: var(--text-primary); font-size: 16.5px; margin: 0 0 8px; }
.hiw-step p { color: var(--text-secondary); font-size: 14.5px; line-height: 1.6; margin: 0; }

/* Contact specifics */
.contact-block { padding: 40px 0 72px; }
.contact-block .content-column { max-width: 640px; }
.contact-email {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-data); font-size: 16px; color: var(--text-primary);
  padding: 14px 20px; border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--bg-raised); text-decoration: none; margin-top: 8px;
}
.contact-email:hover { border-color: var(--blue); }

@media (max-width: 720px) {
  .resource-grid .container { grid-template-columns: 1fr; }
  .page-hero h1 { font-size: 27px; }
  .content-cta { flex-direction: column; align-items: flex-start; }
}