/* ---------------------------------------------------------------------------
   CatalogueConnect overrides.

   The Ainotion stylesheets are never edited. This file loads last and holds
   only what the template does not already provide: spacing for pages that have
   no hero, and a few components the template has no equivalent for.
   --------------------------------------------------------------------------- */

/* Inner pages carry no hero, so they need clearance under the fixed header.
   200px matches the template's own .dtr-hero-section-top-padding. */
.dtr-page-header { padding-top: 200px; padding-bottom: 60px; }

/* Long-form guide and article body. The template styles marketing sections but
   has no measure for running prose, which becomes unreadable at full width. */
.dtr-prose { max-width: 46em; }
.dtr-prose h2 { margin-top: 2.2em; margin-bottom: .6em; }
.dtr-prose h3 { margin-top: 1.8em; margin-bottom: .5em; }
.dtr-prose p, .dtr-prose li { line-height: 1.75; }
.dtr-prose ul, .dtr-prose ol { margin-bottom: 1.5em; padding-left: 1.2em; }
.dtr-prose li { margin-bottom: .5em; }
.dtr-prose > :first-child { margin-top: 0; }

/* Tables. Bootstrap 4 is present but the template never styles a table, and
   the comparison and specification tables need to be readable and to scroll on
   a phone rather than push the page sideways. */
.dtr-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 2em; }
.dtr-table { width: 100%; border-collapse: collapse; }
.dtr-table th, .dtr-table td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid #e7e9f0; }
.dtr-table th { font-weight: 600; color: #071a52; white-space: nowrap; }
.dtr-table tbody tr:last-child td { border-bottom: 0; }
.dtr-table .num { white-space: nowrap; }

/* Marks the current page in the global navigation. */
.sf-menu li.current > a.nav-link { color: #4557e1; }

/* The footer disclaimer and legal lines sit quieter than body text. */
#dtr-footer .text-size-xs { line-height: 1.6; opacity: .75; }

/* Anchor targets in guides must clear the fixed header when linked to. */
.dtr-prose [id] { scroll-margin-top: 140px; }

/* Feature icons. The template ships placeholder images in this slot; the icon
   font it already loads carries real symbols, so the image is swapped for a
   glyph that occupies the same space (.dtr-img-feature img has margin 25px 0). */
.dtr-feature-icon { display: block; margin: 25px 0; font-size: 54px; line-height: 1; color: #0082D1; }

/* The three feature headings differ in length, so their icons land at different
   heights. Reserving two lines aligns the row without touching the template. */
@media (min-width: 768px) {
  .dtr-img-feature h3 { min-height: 72px; }
  .dtr-img-feature .font-style-italic { min-height: 48px; }
}