/* ============================================================
   Lofted Aero brand theme
   Sourced from loftedaero.com (Wix site), captured 2026-07-21:
     - Orange  #F7941D  ("LOFTED" in the logo; site action color)
     - Blue    #4684C5  ("AERO" in the logo)
     - Charcoal#2D2D2F  (neutral text / header)
     - Type    Work Sans (headings + body); set in mkdocs.yml
   Fixed light theme (no dark mode). Keep these tokens in sync if the
   Wix brand changes.
   ============================================================ */

:root {
  --la-orange:      #F7941D;
  --la-orange-deep: #C05A00;  /* darkened for accessible link text on white */
  --la-gold:        #FFC540;
  --la-blue:        #4684C5;
  --la-blue-deep:   #2F6EA8;
  --la-charcoal:    #2D2D2F;
}

/* Header / nav bar: charcoal so the brand orange pops. Body links use the
   deep orange so they stay AA-legible on white. */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:        var(--la-charcoal);
  --md-primary-fg-color--light: #45454a;
  --md-primary-fg-color--dark:  #1c1c1e;
  --md-primary-bg-color:        #ffffff;              /* text/icons on the bar */
  --md-primary-bg-color--light: rgba(255,255,255,.7);

  --md-accent-fg-color:             var(--la-orange);
  --md-accent-fg-color--transparent: rgba(247,148,29,.10);

  --md-typeset-a-color: var(--la-orange-deep);
}
[data-md-color-scheme="default"] ::selection {
  background: rgba(247,148,29,.28);
}

/* ---- (1) Logo: enlarge and sit it on a small white chip so the grey
   line-art + orange/blue wordmark reads clearly on the charcoal bar. */
.md-header__button.md-logo {
  padding: .2rem .3rem;
}
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.7rem;
  width: auto;
  background: #fff;
  border-radius: 6px;
  padding: .16rem .34rem;
  box-sizing: content-box;
}

/* ---- (5) Section headers: bold charcoal with a brand-orange underline so
   each "## section" reads as a clear divider between build phases. */
.md-typeset h2 {
  color: var(--la-charcoal);
  font-weight: 700;
  margin-top: 2.6em;
  padding-bottom: .25em;
  border-bottom: 2px solid var(--la-orange);
}

/* Step titles (### Step N) — tint with the deep orange so steps scan quickly
   without competing with the h2 section dividers. */
.md-typeset h3 {
  color: var(--la-orange-deep);
  font-weight: 700;
}

/* ---- (4) Admonitions in brand colors ----------------------
   Blue family (info / note / question / tip) = "AERO" blue.
   Orange family (warning / danger / caution) = brand orange. */
.md-typeset .admonition.info,      .md-typeset details.info,
.md-typeset .admonition.note,      .md-typeset details.note,
.md-typeset .admonition.question,  .md-typeset details.question,
.md-typeset .admonition.tip,       .md-typeset details.tip,
.md-typeset .admonition.abstract,  .md-typeset details.abstract {
  border-color: var(--la-blue);
}
.md-typeset .info > .admonition-title,     .md-typeset .info > summary,
.md-typeset .note > .admonition-title,     .md-typeset .note > summary,
.md-typeset .question > .admonition-title, .md-typeset .question > summary,
.md-typeset .tip > .admonition-title,      .md-typeset .tip > summary,
.md-typeset .abstract > .admonition-title, .md-typeset .abstract > summary {
  background-color: rgba(70,132,197,.10);
}
.md-typeset .info > .admonition-title::before,     .md-typeset .info > summary::before,
.md-typeset .note > .admonition-title::before,     .md-typeset .note > summary::before,
.md-typeset .question > .admonition-title::before, .md-typeset .question > summary::before,
.md-typeset .tip > .admonition-title::before,      .md-typeset .tip > summary::before,
.md-typeset .abstract > .admonition-title::before, .md-typeset .abstract > summary::before {
  background-color: var(--la-blue);
}

.md-typeset .admonition.warning, .md-typeset details.warning,
.md-typeset .admonition.danger,  .md-typeset details.danger,
.md-typeset .admonition.caution, .md-typeset details.caution,
.md-typeset .admonition.failure, .md-typeset details.failure {
  border-color: var(--la-orange);
}
.md-typeset .warning > .admonition-title, .md-typeset .warning > summary,
.md-typeset .danger > .admonition-title,  .md-typeset .danger > summary,
.md-typeset .caution > .admonition-title, .md-typeset .caution > summary,
.md-typeset .failure > .admonition-title, .md-typeset .failure > summary {
  background-color: rgba(247,148,29,.12);
}
.md-typeset .warning > .admonition-title::before, .md-typeset .warning > summary::before,
.md-typeset .danger > .admonition-title::before,  .md-typeset .danger > summary::before,
.md-typeset .caution > .admonition-title::before, .md-typeset .caution > summary::before,
.md-typeset .failure > .admonition-title::before, .md-typeset .failure > summary::before {
  background-color: var(--la-orange);
}

/* ---- build-guide tweaks ----------------------------------- */

/* Build photos: fill the content column and center consistently.
   (The DOCX widths were a print-layout artifact; the web has no such limit.) */
.md-typeset img {
  display: block;
  width: 100%;
  height: auto;
  margin: 1.2em auto;
  border-radius: 8px;
}

/* Side-by-side layout: mirrors the DOCX habit of placing images (or tables)
   next to each other to fill the page width. Wrap items in
   <div class="cols" markdown>, with a BLANK LINE between each image/table so
   Markdown emits them as separate block children (otherwise they collapse into
   one <p> and stack). The grid sizes to however many children there are
   (two → 2-up, three → 3-up). Collapses to a single column on narrow screens. */
.md-typeset .cols {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1rem;
  align-items: start;
}
.md-typeset .cols > * { min-width: 0; }
.md-typeset .cols p { margin: 0; }
.md-typeset .cols img { width: 100%; margin: 0; }
.md-typeset .cols table { width: 100%; }
@media screen and (max-width: 600px) {
  .md-typeset .cols {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: 1fr;
  }
}

/* Print table: a single full-width reference table (replaces the awkward 2-up
   `cols` layout for print logs). Material "group" rows span the full width to
   separate materials (LW-PLA / PLA / TPU / PETG-CF); the "Print Profile" column
   uses rowspan to mirror the source spreadsheet's merged cells for parts that
   share a profile. Guides whose source has no per-part profile/modifier data use
   the same table with just the Part + Weight columns. */
.md-typeset table.print-table {
  display: table;
  width: 100%;
  margin: 1.2em 0;
  border-collapse: collapse;
}
/* Grid lines on every cell so individual cells — and the merged (rowspan)
   Print Profile cells — read clearly, like the source spreadsheet. */
.md-typeset .print-table th,
.md-typeset .print-table td {
  border: 1px solid rgba(45, 45, 47, .2);
  padding: .45em .7em;
  vertical-align: top;
}
.md-typeset .print-table thead th { border-bottom-color: rgba(45, 45, 47, .4); }
/* Keep the Weight value on one line (it's always the 2nd column). */
.md-typeset .print-table td:nth-child(2) { white-space: nowrap; }
.md-typeset .print-table th.group {
  background: var(--la-charcoal);
  color: #fff;
  text-align: left;
  font-weight: 700;
  letter-spacing: .02em;
}
.md-typeset .print-table tr.total > * {
  background: rgba(247, 148, 29, .12);
  font-weight: 700;
}
/* Merged Print Profile cell: faint blue block so a shared profile reads as one
   group spanning its parts. */
.md-typeset .print-table td[rowspan] { background: rgba(70, 132, 197, .07); }
/* Profile settings stack one-per-line (keeps the column narrow instead of
   flowing as a wide paragraph). */
.md-typeset .print-table .profile-detail {
  display: block;
  margin-top: .4em;
  font-size: .8em;
  line-height: 1.6;
  color: #5a5a5e;
}

/* Skill meter: a 5-segment chevron gradient bar (easy → hard) with a pointer,
   rebuilt from the DOCX graphic. Set the level (1–5) with `style="--level:N"`.
   <div class="skill-meter" style="--level:3"><span></span>×5</div> */
.md-typeset .skill-meter {
  --level: 3;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  max-width: 440px;
  margin: 1.2em 0 1.8em;
  padding-top: 15px;                 /* room for the pointer */
}
.md-typeset .skill-meter span {
  height: 26px;
  /* right-pointing chevron with a left notch, so segments interlock */
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
}
.md-typeset .skill-meter span:first-child {   /* flat left edge on the first */
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}
.md-typeset .skill-meter span:nth-child(1) { background: #2FAE4E; }
.md-typeset .skill-meter span:nth-child(2) { background: #8CC63F; }
.md-typeset .skill-meter span:nth-child(3) { background: #F9D616; }
.md-typeset .skill-meter span:nth-child(4) { background: #F0932B; }
.md-typeset .skill-meter span:nth-child(5) { background: #D63031; }
.md-typeset .skill-meter::after {             /* downward pointer at the level */
  content: "";
  position: absolute;
  top: 0;
  left: calc((var(--level) - 0.5) * 20%);
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 12px solid var(--la-blue);
}

/* Responsive embedded video (Word "online video" objects become an iframe). */
.md-typeset .video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 1.2em 0;
}
.md-typeset .video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
}

/* Caption line: an italic paragraph placed directly under an image. */
.md-typeset p > em:only-child {
  display: inline-block;
  margin-top: 0.4em;
  font-size: 0.9em;
  color: var(--md-default-fg-color--light);
}

/* "At a glance" info box a touch tighter. */
.md-typeset .admonition.info {
  font-size: 0.95em;
}

/* ============================================================
   Custom Lofted Aero header + footer (overrides/partials/*.html)
   Mirrors the loftedaero.com Wix chrome so the guides read as a
   real section of the site. Wix orange used here is #F19F4D.
   ============================================================ */
:root { --la-orange-wix: #F19F4D; --la-discord: #5865F2; }

/* Embedded in the loftedaero.com Wix page (inside an iframe): hide our own
   header/footer so the guide content sits directly under the real Wix chrome.
   Direct visits to resources.loftedaero.com are not framed and keep them. */
.la-framed .la-header,
.la-framed .la-footer { display: none; }

/* ---- Header: minimal white, non-sticky logo bar (standalone only; hidden
   when embedded — see .la-framed above). No nav by design; navigation lives on
   the real Wix chrome when embedded. Logo links back to the main site. ---- */
.md-header.la-header {
  position: static;                 /* not sticky */
  background: #fff;
  color: var(--la-charcoal);
  box-shadow: 0 1px 0 rgba(45,45,47,.12);
}
.la-header__inner {
  display: flex;
  align-items: center;
  max-width: 76rem;
  margin: 0 auto;
  padding: .55rem 1.2rem;
  width: 100%;
}
.la-header__logo { display: block; }
.la-header__logo img { height: 54px; width: auto; display: block; }
@media screen and (max-width: 76.1875em) {
  .la-header__logo img { height: 44px; }
}

/* Material's built-in drawer logo is unused now — hide it. */
.md-nav__button.md-logo { display: none; }

/* ---- Footer: charcoal "Get Connected" band over orange band ---- */
.la-footer { width: 100%; }
.la-footer__inner { max-width: 68rem; margin: 0 auto; padding: 0 1.5rem; width: 100%; }

.la-footer__connect { background: var(--la-charcoal); color: #fff; padding: 3.5rem 0; }
.la-footer__connect-grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 2rem;
  align-items: center;
}
.la-footer__title { color: #fff; font-weight: 700; font-size: 2.1rem; margin: 0 0 1rem; }
.la-footer__blurb { max-width: 28rem; line-height: 1.55; color: #e4e4e6; margin: 0 0 1.6rem; }
.la-social { display: flex; gap: 1rem; }
.la-social a { display: inline-flex; }
.la-social a svg { width: 1.9rem; height: 1.9rem; fill: #fff; transition: fill .15s ease; }
.la-social a:hover svg { fill: var(--la-orange-wix); }
.la-footer__cta { text-align: right; }
.la-btn {
  display: inline-block;
  background: var(--la-blue);
  color: #fff;
  font-weight: 700;
  padding: .8rem 1.8rem;
  border-radius: 2rem;
  text-decoration: none;
  transition: background .15s ease;
}
.la-btn:hover { background: var(--la-blue-deep); }

.la-footer__promo { background: var(--la-orange-wix); color: #fff; padding: 2.6rem 0; }
.la-footer__promo-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  text-align: center;
}
.la-discord {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  background: var(--la-discord);
  color: #fff;
  text-decoration: none;
  padding: .55rem 1.4rem .55rem .55rem;
  border-radius: 1rem;
  transition: filter .15s ease;
}
.la-discord:hover { filter: brightness(1.08); }
.la-discord__chip {
  background: #fff;
  border-radius: .6rem;
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  padding: .35rem;
  flex: 0 0 auto;
}
.la-discord__chip img { width: 100%; height: auto; }
.la-discord__text { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; line-height: 1.1; text-align: left; }
.la-discord__text strong { font-size: 1.5rem; }
.la-copyright { margin: 0; color: #fff; font-weight: 600; }

@media screen and (max-width: 55em) {
  .la-footer__connect-grid { grid-template-columns: 1fr; }
  .la-footer__cta { text-align: left; }
  .la-footer__title { font-size: 1.8rem; }
}

/* ---- Home page: guide grid --------------------------------
   Card grid of published guides on index.md. Each card is a single <a>
   wrapping a thumbnail + title + blurb (raw HTML, so the whole tile is the
   link). Thumbnails are 3:2 tiles from scripts/make_thumbnails.py. */
.md-typeset .guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.1rem;
  margin: 1.5em 0;
}
.md-typeset .guide-card {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(45, 45, 47, .12);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  color: inherit;                 /* keep the whole card from turning link-orange */
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(45, 45, 47, .06);
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.md-typeset .guide-card:hover {
  border-color: var(--la-orange);
  box-shadow: 0 6px 18px rgba(45, 45, 47, .14);
  transform: translateY(-2px);
}
.md-typeset .guide-card img {         /* override the full-width .md-typeset img rule */
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
}
.md-typeset .guide-card-body {
  display: block;
  padding: .7rem .85rem .9rem;
}
.md-typeset .guide-card-title {
  display: block;
  font-weight: 700;
  color: var(--la-charcoal);
  line-height: 1.25;
}
.md-typeset .guide-card:hover .guide-card-title {
  color: var(--la-orange-deep);
}
.md-typeset .guide-card-desc {
  display: block;
  margin-top: .3rem;
  font-size: .82em;
  line-height: 1.45;
  color: #5a5a5e;
}