/* ==========================================================================
   AI Reference (template-ai-reference.php) — scoped .air-* styles.

   Sits on top of styles.css (#fa-hero, .la-container, .btn-orange) and
   core-content.css, whose shared pieces this page uses directly:
     #fa-hero.cc-hero + .cc-hero-lede   the cc hero (no section dropdown)
     .cc-eyebrow                        section eyebrows (brandon caps)
     .cc-faq--grid                      the questions table + FAQPage JSON-LD
   Everything below that is page-specific copies the core-content values
   (noted inline) so this page reads like the Solutions / Industries pages.
   Tokens only: palette custom properties from styles.css :root.
   ========================================================================== */

/* ── Sticky index needs a non-scrolling ancestor ─────────────────────────
   header-rb's inline style gives .site-wrapper `overflow: hidden`, which
   makes it a scroll container and silently disables position: sticky for
   everything inside it. `clip` clips the same way without creating a
   scroll container. Scoped to this template only. */
.page-template-template-ai-reference .site-wrapper {
  overflow: clip;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
/* .cc-hero reserves 8rem at the bottom for its section dropdown band, which
   this page has no use for. Bottom only: the top padding is the nav-overlay
   clearance in assets/css/website-v2/rb-nav.css and must not be touched. */
#fa-hero.air-hero {
  padding-bottom: 5rem;
}
/* Tighter two-line headline than the shared hero: .cc-hero drops the
   green <em> line .35em below the first, on #fa-hero h1's 1.32 leading.
   Line-height only — never re-declare a font-size here (it would beat the
   ≤991 / ≤767 size rungs in styles.css; see core-content.css #fa-hero.cc-hero h1). */
#fa-hero.air-hero h1 {
  line-height: 1.15;
}
#fa-hero.air-hero h1 em {
  margin-top: .1em;
}
.air-updated {
  font-family: "brandon-grotesque", sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: hsla(0, 0%, 100%, .7);
  margin: 2rem 0 0;
}

/* ── Body: sticky index + content column ───────────────────────────────── */
.air-body {
  background: var(--white);
  padding-block: 4.5rem 5rem; /* .cc-faq's band rhythm */
}
.air-layout {
  display: grid;
  grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: start;
}
.air-toc {
  position: sticky;
  top: 2rem; /* .cc-section > h2's sticky offset */
}
.air-toc-label {
  font-family: "brandon-grotesque", sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dark-green);
  margin: 0 0 1rem;
}
.air-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1.5px solid #e3e7e9;
}
.air-toc li {
  list-style: none;
}
.air-toc a {
  display: block;
  padding: .4rem 0 .4rem 1rem;
  margin-left: -1.5px;
  border-left: 1.5px solid transparent;
  font-family: "leo", sans-serif;
  font-size: .95rem;
  line-height: 1.35;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}
.air-toc a:hover,
.air-toc a:focus-visible,
.air-toc a.is-active {
  color: var(--dark-navy);
  border-left-color: var(--light-green);
}

.air-content {
  min-width: 0;
}
.air-section {
  scroll-margin-top: 2rem;
  padding-bottom: 4rem;
  margin-bottom: 4rem;
  border-bottom: 1.5px solid #e3e7e9;
}
.air-section:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Section heading: .cc-band h2's ramp. */
.air-content h2 {
  font-family: "leo", sans-serif;
  font-size: clamp(1.85rem, 4.5vw, 2.7rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--dark-navy);
  margin: 0 0 2rem;
}
/* Sub-heading: .cc-answer h3. */
.air-subhead {
  font-family: "leo", sans-serif;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--dark-navy);
  margin: 2.5rem 0 1.25rem;
}
.air-subhead:first-of-type {
  margin-top: 0;
}

/* Body copy: .cc-answer p / li. :not([class]) so it never outranks a
   classed element such as .cc-eyebrow. */
.air-content p:not([class]),
.air-content li:not([class]),
.air-content dd {
  font-family: "leo", sans-serif;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--gray);
}
.air-prose p {
  margin: 0 0 1.1em;
}
.air-prose p:last-child {
  margin-bottom: 0;
}
.air-content strong {
  color: var(--dark-navy);
  font-weight: 500;
}
/* Inline links: .cc-answer a. */
.air-content a:not([class]) {
  color: var(--dark-green);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.air-content a:not([class]):hover {
  color: var(--dark-teal);
}

/* Lists: .cc-answer ul / ol — native markers in the core-content colours. */
.air-list,
.air-flow {
  margin: 0;
  padding-left: 1.25rem;
}
.air-list li,
.air-flow li {
  margin-bottom: .55em;
}
.air-list li:last-child,
.air-flow li:last-child {
  margin-bottom: 0;
}
.air-content .air-list li {
  list-style: disc;
}
.air-list li::marker {
  color: var(--light-green);
}
.air-content .air-flow li {
  list-style: decimal;
}
.air-flow li::marker {
  color: var(--dark-green);
  font-family: "brandon-grotesque", sans-serif;
  font-weight: 700;
}

/* ── Label / value rows (essentials, clients) ──────────────────────────── */
.air-facts,
.air-defs {
  margin: 0;
  border-top: 1.5px solid #e3e7e9;
}
.air-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2rem;
}
.air-fact,
.air-defs > div {
  display: grid;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1.5px solid #e3e7e9;
}
.air-fact {
  grid-template-columns: 9.5rem minmax(0, 1fr);
}
.air-defs > div {
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: 1.5rem;
}
/* Labels: the site's brandon caps label (.cc-eyebrow's face, muted). */
.air-fact dt,
.air-defs dt {
  font-family: "brandon-grotesque", sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-top: .35rem;
}
.air-fact dd,
.air-defs dd {
  margin: 0;
}
.air-content .air-fact dd {
  color: var(--dark-navy);
}

/* ── Callout (How to refer to us) ──────────────────────────────────────── */
.air-callout {
  margin-top: 2rem;
  padding: 1.75rem 2rem;
  background: var(--light-gray);
  border: 1px solid #e3e7e9;
  border-left: 3px solid var(--light-green);
  border-radius: 0 8px 8px 0;
}
.air-callout h3 {
  font-family: "leo", sans-serif;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--dark-navy);
  margin: 0 0 .75rem;
}

/* ── Numbered cards: .cc-numbered-card on a white band ─────────────────── */
.air-cards,
.air-layers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}
.air-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.air-layers {
  margin-block: 2rem;
}
.air-card,
.air-layers > li {
  list-style: none;
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.6rem 1.6rem;
  border-radius: 8px;
  background: var(--white);
  border: 1px solid #e3e7e9;
  border-top: 3px solid var(--air-accent, var(--light-green));
  box-shadow: 0 2px 16px rgba(6, 41, 53, .07);
}
.air-card:nth-child(4n+1),
.air-layers > li:nth-child(4n+1) { --air-accent: var(--bright-orange); }
.air-card:nth-child(4n+2),
.air-layers > li:nth-child(4n+2) { --air-accent: var(--light-green); }
.air-card:nth-child(4n+3),
.air-layers > li:nth-child(4n+3) { --air-accent: var(--bright-blue); }
.air-card:nth-child(4n+4),
.air-layers > li:nth-child(4n+4) { --air-accent: var(--bright-yellow); }

/* .cc-numbered-num: leo italic numeral in the card's accent. */
.air-card-num {
  font-family: "leo", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 2rem;
  line-height: 1;
  color: var(--air-accent);
  margin-bottom: 1.1rem;
}
.air-card h4,
.air-layers h3 {
  font-family: "leo", sans-serif;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--dark-navy);
  margin: 0 0 .75rem;
}
.air-content .air-card h4 a {
  color: inherit;
  text-decoration: none;
}
.air-content .air-card h4 a:hover {
  color: var(--dark-green);
}
.air-content .air-card p,
.air-content .air-layers p {
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
}

/* ── FAQ inside the content column ─────────────────────────────────────── */
/* The shared .cc-faq is a full band with its own container; here it is one
   section of the column, so its band padding and container gutters go. */
.air-faq .cc-faq {
  padding: 0;
  background: transparent;
  scroll-margin-top: 2rem;
}
.air-faq .cc-faq > .la-container {
  max-width: none;
  padding-inline: 0;
}
.air-faq .cc-faq h2 {
  max-width: none;
  margin-bottom: 2rem;
}

/* ── Notes for AI assistants ──────────────────────────────────────────── */
/* Numbered rows: hairlines from the label/value rows, numerals in the
   .cc-numbered-num face (leo italic, dark green on white). */
.air-notes-list {
  margin: 0;
  padding: 0;
  border-top: 1.5px solid #e3e7e9;
  counter-reset: air-note;
}
.air-content .air-notes-list li {
  list-style: none;
  counter-increment: air-note;
  position: relative;
  margin: 0;
  padding: 1.1rem 0 1.1rem 3.25rem;
  border-bottom: 1.5px solid #e3e7e9;
}
.air-notes-list li::before {
  content: counter(air-note, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.1rem;
  font-family: "leo", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.35;
  color: var(--dark-green);
}

/* ── Closing call to action ────────────────────────────────────────────── */
.air-cta p {
  max-width: 62ch;
  margin: 0 0 2rem;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .air-facts {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 991px) {
  /* core-content.css swaps in the Fleet truck photo + scrim on every cc hero
     below 992 (with !important, to beat hero.php's inline image). This page
     has no hero artwork, so keep the plain navy ground. */
  #fa-hero.cc-hero.air-hero {
    background-image: none !important;
  }
  #fa-hero.cc-hero.air-hero::after {
    content: none;
  }
  .air-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .air-toc {
    display: none;
  }
}
@media (max-width: 767px) {
  #fa-hero.air-hero {
    padding-bottom: 3rem;
  }
  .air-body {
    padding-block: 3rem 3.5rem;
  }
  .air-section {
    padding-bottom: 3rem;
    margin-bottom: 3rem;
  }
  .air-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .air-fact,
  .air-defs > div {
    grid-template-columns: minmax(0, 1fr);
    gap: .35rem;
  }
  .air-callout {
    padding: 1.4rem 1.25rem;
  }
}