/* MapleCAM & Tenon — minimal corrections on top of the Universal theme. The
   theme's `red` style supplies the palette (--primary-accent: #da4d4d);
   nothing here restyles the template, it only fixes things our content breaks.

   Keep this file small. If a change is big enough to alter the template's
   character, it probably shouldn't be here. whatsit.ca runs the same theme on
   `blue` with its own copy of this file. */

/* The demo hero used a wide laptop mockup. Application screenshots are wider
   still, and at full height they blow the hero band out past the fold. */
.home-carousel img.img-responsive {
  max-height: 420px;
  width: auto;
  margin: 0 auto;
}

/* The "see more" band shipped with a stock photo behind it, busy enough to
   fight the call to action sitting on top. Swapped for the theme's own accent
   so the band reads as intentional.

   background-attachment: fixed also went: parallax forces a repaint on every
   scroll frame, which is the jank you feel on a phone. */
.bar.background-image-fixed-2 {
  background: var(--primary-accent);
  background-attachment: scroll;
}

/* Brand lockup — mark plus wordmark (see layouts/partials/nav.html).
   Roboto is the theme's face; we just size it to sit against the nav. */
.navbar-brand.home {
  display: flex;
  align-items: center;
  gap: 10px;
  height: auto;
}

.brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.brand-wordmark {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.1;
  color: #333;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Tagline moved here from the theme's grey top bar, which was removed. */
.brand-tagline {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
  color: #888;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .brand-wordmark { font-size: 15px; white-space: normal; }
  .brand-tagline { display: none; }
}

/* Markdown tables get no class, so Bootstrap's .table styling never applies
   and the downloads table's columns run together. Mirror .table for tables
   inside page content. */
#content table {
  width: 100%;
  margin-bottom: 20px;
}

#content th,
#content td {
  padding: 8px;
  border-top: 1px solid #ddd;
  vertical-align: top;
  text-align: left;
}

#content thead th { border-bottom: 2px solid #ddd; border-top: 0; }

/* --- Documentation-ish page content -------------------------------------
   The theme is a business template: it never expected fenced code blocks or
   long-form prose in a page body, both of which the downloads and support
   pages have. */

#content pre {
  background: #f7f7f7;
  border: 1px solid #e3e3e3;
  border-radius: 0;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  overflow-x: auto;
}

#content code {
  background: #f2f2f2;
  color: #444;
  border-radius: 2px;
  padding: 2px 5px;
  font-size: 90%;
}

#content pre code {
  background: none;
  padding: 0;
  font-size: 100%;
}

/* Screenshots in a page body ({{< screenshot >}}). A bare application window
   on white bleeds into the page, so give it an edge. */
.page-screenshot {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 8px auto 28px;
  border: 1px solid #e0e0e0;
}

/* Bootstrap 3's <hr> is nearly invisible against white; the product pages use
   it to separate the intro from the detail. */
#content hr {
  border-top: 1px solid #e5e5e5;
  margin: 32px 0;
}

/* Buttons sitting side by side under an intro paragraph need breathing room —
   Bootstrap 3 gives adjacent inline-blocks a single space. */
#content .btn + .btn { margin-left: 8px; }

@media (max-width: 480px) {
  #content .btn { display: block; margin-bottom: 8px; }
  #content .btn + .btn { margin-left: 0; }
}