/* FreeCAD NX-Style documentation: NXStyle's accent (#0b6e79, the same teal as the add-on's theme)
   layered on Antora's default UI. The default UI compiles its colours to fixed values, so they are
   overridden by selector here, not by its custom properties. */
:root {
  --nx-accent: #0b6e79;
  --nx-accent-dark: #095a63;
  --nx-accent-soft: #e6f2f3;
  --nx-accent-tint: #c7e3e7;
}

/* header */
.navbar { background: var(--nx-accent); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08); }

/* links in the page, the menu and the page outline */
.doc a, .doc a code { color: var(--nx-accent); }
.doc a:hover { color: var(--nx-accent-dark); }
.nav-menu .is-current-page > .nav-link { color: var(--nx-accent); }
.toc .toc-menu a.is-active { border-left-color: var(--nx-accent); color: var(--nx-accent-dark); }
.toc .toc-menu a:hover { color: var(--nx-accent); }
.pagination a:hover { color: var(--nx-accent); }
.navbar-brand .navbar-item { color: #fff; }
.nx-brand { font-weight: 600; letter-spacing: 0.01em; gap: 0.55rem; display: flex; align-items: center;
  white-space: nowrap; flex-shrink: 0; }
.nx-title-short { display: none; }
@media screen and (max-width: 599.5px) {
  .nx-title { display: none; }
  .nx-title-short { display: inline; }
  .navbar-brand .navbar-item.search { flex: 1 1 auto; min-width: 0; padding-left: 0.5rem; padding-right: 0.25rem; }
  #search-input { width: 100%; }
}
/* the project's own mark (docs/ui/img/logo.svg); a white ring keeps it apart from the teal bar */
.site-logo { width: 1.9rem; height: 1.9rem; border-radius: 9px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85);
  flex-shrink: 0; }
@media screen and (min-width: 1024px) {
  .navbar-end > a.navbar-item, .navbar-end .navbar-link { color: #fff; }
  .navbar-end > a.navbar-item:hover { background: var(--nx-accent-dark); color: #fff; }
}
.nx-github { font-weight: 600; }
#search-input { border-radius: 4px; border: 1px solid transparent; }
#search-input:focus { border-color: var(--nx-accent-tint); outline: none; }

/* reading comfort */
.doc { color: #1f2a33; line-height: 1.65; }
.doc h1.page { color: #12303a; }
.doc h2 { border-bottom: 1px solid #e3e8ec; padding-bottom: 0.2em; }
.doc .paragraph.lead > p { font-size: 1.15em; color: #3b4650; }

/* screenshots: framed, never wider than the column, readable on phones */
.doc .imageblock img { max-width: 100%; height: auto; border: 1px solid #d5dde3; border-radius: 6px;
  box-shadow: 0 2px 10px rgba(16, 42, 54, 0.08); }
.doc .imageblock .title { font-style: normal; color: #5f6b7a; font-size: 0.9em; }
.doc .imageblock.borderless img { border: 0; box-shadow: none; }

/* keyboard keys */
.doc kbd {
  border: 1px solid #c5ced6; border-bottom-width: 2px; border-radius: 4px; background: #f7f9fa;
  padding: 0.05em 0.4em; font-size: 0.85em; color: #24313b; white-space: nowrap;
}

/* tutorial outcome badges (generated tables) */
.doc .outcome { display: inline-block; padding: 0.05em 0.5em; border-radius: 999px; font-size: 0.82em; font-weight: 600; }
.doc .outcome.same { background: #e3f4e8; color: #1a6b35; }
.doc .outcome.differs { background: var(--nx-accent-soft); color: var(--nx-accent-dark); }
.doc .outcome.limit { background: #fff1d6; color: #8a5a00; }
.doc .outcome.missing { background: #f0e8fb; color: #5b3a8c; }
.doc .outcome.skipped { background: #eef1f4; color: #5f6b7a; }
.doc .outcome.failed { background: #fde7e7; color: #b42318; }
.doc table.steps { font-size: 0.88em; }
.doc table.steps td:first-child { white-space: nowrap; font-weight: 600; color: #5f6b7a; }

/* wide reference tables scroll sideways on small screens instead of squeezing */
@media screen and (max-width: 1023.5px) {
  .doc table.tableblock { display: block; overflow-x: auto; max-width: 100%; }
  /* cells keep a readable width; the table scrolls sideways inside its block instead */
  .doc table.tableblock th.tableblock, .doc table.tableblock td.tableblock { min-width: 6.5rem; }
  .doc table.steps th.tableblock:first-child, .doc table.steps td.tableblock:first-child { min-width: 2.5rem; }
}

/* "at a glance" cards on the home page */
.doc .ulist.nx-cards ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.8rem;
  list-style: none; margin: 1rem 0 0; padding: 0; }
.doc .ulist.nx-cards li { border: 1px solid #dfe6eb; border-radius: 8px; padding: 0.8rem 1rem; background: #fafcfd;
  margin: 0; }
.doc .ulist.nx-cards li:hover { border-color: var(--nx-accent-tint); background: var(--nx-accent-soft); }
.doc .ulist.nx-cards li p { margin: 0; }
.doc .ulist.nx-cards li a { font-weight: 600; }

/* admonitions in the accent */
.doc .admonitionblock.tip td.icon .icon-tip::before { color: var(--nx-accent); }
.doc .admonitionblock.note td.icon .icon-note::before { color: var(--nx-accent); }

/* footer */
.footer { background: #f3f6f8; color: #5f6b7a; font-size: 0.85rem; }
.footer a { color: var(--nx-accent); }

/* Shared documentation shell. Keep the reference pages quiet and easy to scan. */
:root {
  --nx-ink: #142e38;
  --nx-muted: #51656d;
  --nx-line: #dbe5e8;
  --nx-paper: #f5f8f8;
}
html { scroll-padding-top: 5rem; }
body { background: #fff; }
.navbar { background: #122f3a; box-shadow: 0 1px 0 #284550; }
.nx-brand { font-size: 1rem; letter-spacing: -.02em; }
.site-logo { box-shadow: none; border-radius: 8px; }
.navbar-item.search { flex: 1; min-width: 12rem; }
#search-field { width: 100%; }
#search-input {
  width: 100%; max-width: 19rem; background: #f6fafb; color: var(--nx-ink);
  font: inherit; font-size: .78rem; padding: .55rem .8rem; border-radius: 7px;
}
#search-input::placeholder { color: #556b74; opacity: 1; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid #d89218; outline-offset: 4px;
}
#search-input:focus { outline: 3px solid #d89218; outline-offset: 2px; }
.nav-menu { font-size: .8rem; }
.nav-menu .nav-item { margin-top: .4em; }
.nav-menu .is-current-page > .nav-link { font-weight: 700; }
.nav-container { background: #f8fafb; }
.toolbar { border-bottom-color: var(--nx-line); box-shadow: none; }
.doc { color: #243c46; hyphens: none; }
.doc h1.page, .doc h2, .doc h3 { color: var(--nx-ink); letter-spacing: -.025em; }
.doc h1.page { font-weight: 700; }
.doc h2 { margin-top: 2.3rem; }
.doc a { text-underline-offset: .18em; }
.doc .imageblock img { border-radius: 10px; }
footer.footer { border-top: 1px solid var(--nx-line); padding: 2rem 3rem; font-size: .75rem; }
.footer p { max-width: 72rem; margin-left: auto; margin-right: auto; }

/* The overview is a landing page. The complete documentation nav remains on all guides. */
.home .nav-container, .home .toolbar, .home .toc, .home .pagination { display: none; }
.home main.article { width: 100%; margin: 0; }
.home .content { min-width: 0; }
.home .doc {
  max-width: 76rem; width: 100%; margin: 0 auto; padding: 0 2rem;
  font-size: .9rem; line-height: 1.65;
}
.home .doc h1.page {
  font-size: .8rem; font-weight: 650; letter-spacing: .09em; text-transform: uppercase;
  margin: 1.6rem 0 1.2rem; color: var(--nx-muted);
}
.home .doc .sect1 { margin-top: 3.7rem; }
.home .doc h2 { margin: 0 0 .8rem; padding: 0; border: 0; font-size: 1.8rem; font-weight: 700; }
.home .doc h3 { font-weight: 650; font-size: 1.3rem; }
.home .doc .nx-hero { margin: 0; }
.home .doc .nx-hero > .content {
  display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 2rem;
  background: #122f3a; border-radius: 18px; padding: 2.5rem;
  background-image: radial-gradient(ellipse at 90% 15%, #225867 0, transparent 65%);
  box-shadow: 0 14px 35px #12303a18;
}
.home .doc .nx-hero .exampleblock, .home .doc .nx-tutorial-card { margin: 0; }
.home .doc .nx-hero .exampleblock > .content {
  background: transparent; box-shadow: none; border: 0; padding: 0;
}
.home .doc .nx-hero p { color: #d4e3e8; }
.home .doc .nx-eyebrow p { font-size: .62rem; color: #a1ded9; letter-spacing: .12em; font-weight: 700; }
.home .doc .nx-headline p {
  color: #fff; font-size: clamp(2.2rem, 3.8vw, 3.2rem); font-weight: 720;
  line-height: 1.12; letter-spacing: -.045em; margin: 1.1rem 0;
}
.home .doc .nx-intro p { font-size: .92rem; line-height: 1.75; max-width: 27rem; }
.home .doc .nx-actions p { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin: 1.6rem 0 1.2rem; }
.home .doc .nx-actions a { color: #e5f6f5; font-size: .78rem; font-weight: 650; text-decoration: none; }
.home .doc .nx-actions a:first-child { background: #a7ece1; color: #102f35; padding: .7rem 1rem; border-radius: 6px; }
.home .doc .nx-actions a:first-child:hover { background: #cdf8f1; }
.home .doc .nx-actions a:last-child:hover { text-decoration: underline; }
.home .doc .nx-hero-note p { font-size: .64rem; color: #b6cdd6; }
.home .doc .nx-hero-visual .imageblock { margin: 0; }
.home .doc .nx-hero-visual img { border: 1px solid #b8cbd1; border-radius: 8px; box-shadow: 0 12px 35px #06191f45; }
.home .doc .nx-caption p { margin: .8rem 0 0; font-size: .66rem; color: #d3e3e8; }
.home .doc .nx-caption a { color: #a7ece1; }
.home .doc .nx-jump-links ul {
  display: flex; flex-wrap: wrap; justify-content: center; list-style: none;
  margin: 1.5rem 0 0; padding: 0; gap: .5rem 2rem;
}
.home .doc .nx-jump-links li { margin: 0; }
.home .doc .nx-jump-links a { font-size: .72rem; font-weight: 600; }
.home .doc .nx-section-intro { max-width: 44rem; color: var(--nx-muted); margin-bottom: 1.5rem; }
.home .doc .nx-section-intro a { white-space: nowrap; }
.home .doc :is(.nx-updates, .nx-workflows, .nx-start-paths) ul {
  display: grid; list-style: none; padding: 0; margin: 0; gap: 1.2rem;
}
.home .doc :is(.nx-updates, .nx-start-paths) ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home .doc :is(.nx-updates, .nx-workflows, .nx-start-paths) li { margin: 0; }
.home .doc :is(.nx-updates, .nx-workflows, .nx-start-paths) li p { margin: 0; font-size: .8rem; line-height: 1.8; }
.home .doc :is(.nx-updates, .nx-workflows, .nx-start-paths) strong {
  display: inline-block; margin-bottom: .6rem; font-size: 1.02rem; line-height: 1.35;
}
.home .doc :is(.nx-updates, .nx-workflows, .nx-start-paths) strong a { color: var(--nx-ink); }
.home .doc .nx-updates li { border-top: 3px solid #16858b; padding: 1.1rem .15rem; }
.home .doc .nx-workflows ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.home .doc .nx-workflows li {
  background: var(--nx-paper); border: 1px solid var(--nx-line); border-radius: 10px; padding: 1.4rem 1.6rem;
}
.home .doc .nx-workflows li:hover { border-color: #90bdc3; }
.home .doc .nx-kicker { color: #526b75; font-size: .61rem; font-weight: 700; letter-spacing: .09em; }
.home .doc span.nx-kicker { display: inline-block; margin-bottom: .6rem; }
.home .doc .nx-tutorial-grid > .content { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.home .doc .nx-tutorial-card > .content {
  padding: 0 0 1.2rem; background: #fff; border: 1px solid var(--nx-line);
  border-radius: 10px; box-shadow: 0 4px 14px #1c3e4610; height: 100%; overflow: hidden;
}
.home .doc .nx-tutorial-card .imageblock { margin: 0 0 1rem; }
.home .doc .nx-tutorial-card img { border: 0; border-radius: 0; box-shadow: none; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #edf1f3; }
.home .doc .nx-tutorial-card .paragraph { padding: 0 1.1rem; }
.home .doc .nx-tutorial-card .paragraph p { margin-bottom: .55rem; font-size: .79rem; line-height: 1.65; }
.home .doc .nx-tutorial-card .nx-kicker p { font-size: .57rem; letter-spacing: .06em; }
.home .doc .nx-tutorial-card strong { font-size: .95rem; }
.home .doc .nx-browse { margin-top: 1.4rem; font-weight: 650; }
.home .doc .nx-expectations { background: #edf5f5; border-left: 3px solid #16858b; padding: 1.4rem 1.8rem; margin-top: 3rem; border-radius: 0 10px 10px 0; }
.home .doc .nx-expectations h3 { margin-top: 0; }
.home .doc .nx-expectations p { font-size: .82rem; max-width: 60rem; }
.home .doc .nx-start-paths li { padding: .5rem 1.2rem .5rem 0; }
.home .doc .nx-closing { text-align: center; padding: 2.3rem 0; margin-top: 2.5rem; border-top: 1px solid var(--nx-line); color: var(--nx-muted); font-size: .8rem; }
/* Also used by the tutorial catalogue to put learning goals before the full reference. */
.doc .nx-learning-paths ul { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin: 1rem 0; padding: 0; }
.doc .ulist.nx-learning-paths li { background: var(--nx-paper); border: 1px solid var(--nx-line); padding: .9rem 1rem; border-radius: 8px; margin: 0; }
.doc .ulist.nx-learning-paths li p { margin: 0; font-size: .86em; }
@media screen and (min-width: 1024px) {
  .navbar { padding: 0 1rem; }
  .navbar-brand { flex-grow: 1; }
  .navbar-end > a.navbar-item { font-size: .76rem; }
  .navbar-end > a.navbar-item:hover { background: #234854; }
}
@media screen and (max-width: 1023.5px) {
  .home .doc { padding: 0 1.2rem; }
  .home .doc .nx-hero > .content { gap: 1.5rem; padding: 2rem; }
  .home .doc .nx-headline p { font-size: 2.3rem; }
  .home .doc .nx-tutorial-grid > .content { gap: .75rem; }
}
@media screen and (max-width: 767.5px) {
  .home .doc .nx-hero > .content { grid-template-columns: 1fr; padding: 1.5rem; }
  .home .doc .nx-headline p { font-size: 2.6rem; }
  .home .doc .nx-hero-copy { max-width: 32rem; }
  .home .doc .nx-hero-visual { max-width: 32rem; }
  .home .doc :is(.nx-updates, .nx-start-paths) ul,
  .home .doc .nx-tutorial-grid > .content { grid-template-columns: 1fr; }
  .home .doc .nx-tutorial-card > .content { padding-bottom: .8rem; }
  .home .doc .nx-tutorial-card img { max-height: 20rem; }
  .home .doc .nx-jump-links ul { justify-content: flex-start; gap: .4rem 1.2rem; }
  .home .doc .sect1 { margin-top: 2.8rem; }
  .home .doc h2 { font-size: 1.55rem; }
  .home .doc .nx-section-intro a { white-space: normal; }
  .footer { padding: 1.5rem; }
}
@media screen and (max-width: 599.5px) {
  .home .doc { padding: 0 .9rem; }
  .home .doc h1.page { margin: 1.2rem 0 .9rem; }
  .home .doc .nx-hero > .content { padding: 1.3rem; border-radius: 12px; }
  .home .doc .nx-headline p { font-size: 2.3rem; }
  .home .doc .nx-workflows ul, .doc .nx-learning-paths ul { grid-template-columns: 1fr; }
  .home .doc .nx-workflows li { padding: 1.2rem; }
  .home .doc .nx-expectations { padding: 1.1rem; }
  .navbar-item.search { min-width: 0; }
  .nx-brand { font-size: .9rem; gap: .35rem; padding-left: .6rem; }
  #search-input { font-size: .7rem; padding: .5rem; }
  .site-logo { width: 1.6rem; height: 1.6rem; }
}
@media print {
  .home .doc .nx-hero > .content { background: #fff; box-shadow: none; border: 1px solid #ccc; }
  .home .doc .nx-hero p, .home .doc .nx-hero a { color: #172f38; }
  .home .doc .nx-actions, .home .doc .nx-jump-links { display: none; }
}
