/* User Provided Stylesheet */

/* 4LC00 - Strength and Structure
   Shared look-and-feel with the 4RA10 lecture notes. */

/* Centred figure captions (kept from the original 4LC00 stylesheet). */
figcaption {
  text-align: center;
}

/* Example boxes.

   These use the `prf:example` directive rather than a plain admonition,
   because only proof-kind directives are enumerated by MyST - that is what
   makes "Example 1.1", "Example 1.2", ... and {numref}`example:label` work.
   The rendered DOM is <details class="myst-proof"> > <summary
   class="myst-proof-header"> > <div class="myst-proof-title">, so the
   selectors below target that structure rather than .myst-admonition. */

/* 1. Set custom border and background colors */
.myst-proof {
  border-left-width: 4px !important;
  border-left-style: solid !important;
  border-left-color: #0284c7 !important; /* Accent color (Sky Blue) */
  background-color: #f0f9ff !important; /* Light background tint */
}

/* Header shares the tint so the title bar doesn't stay theme-coloured */
.myst-proof .myst-proof-header {
  background-color: #e0f2fe !important;
}

.myst-proof .myst-proof-title,
.myst-proof .myst-proof-title a {
  color: #0c4a6e !important;
}

/* 2. Insert the magnifier symbol ahead of the "Example N" title.
      Proof headers have no built-in kind icon to hide, unlike admonitions;
      the trailing chevron is a separate .details-toggle element. */
.myst-proof .myst-proof-header::before {
  content: "🔍";
  margin-left: 0.75rem;
  font-style: normal;
  align-self: center;
}

/* Tighten the theme's ml-4 on the title so the emoji sits next to it */
.myst-proof .myst-proof-title {
  margin-left: 0.5rem !important;
}


/* Classic Overleaf / LaTeX tabular grid style.
   Apply with `:class: latex-grid` on a {table} directive. */
.latex-grid table {
  border-collapse: collapse !important;
  border: 1px solid #000 !important; /* Top and bottom \hline */
  margin-left: auto !important;
  margin-right: auto !important; /* Mimics \centering */
  color: #000 !important; /* True black text */
}

/* Inner cell borders mapping to the | characters */
.latex-grid table th,
.latex-grid table td {
  border: 1px solid #000 !important;
  padding: 6px 16px !important; /* Tighter padding like LaTeX */
}

/* Header line mapping to the \hline under the titles */
.latex-grid table thead th {
  border-bottom: 1px solid #000 !important;
  font-weight: bold;
}


/* Display-math vertical clipping fix.

   book-theme wraps every display equation in
       <div class="flex-grow overflow-x-auto overflow-y-hidden">
   so that wide equations can scroll sideways. But overflow-y:hidden makes
   that box clip vertically too, and its height comes from KaTeX's line-box
   strut, which is a few px shorter than the real ink extent of tall
   constructs (\frac numerators, \dot and \bar accents, \sqrt, matrices).

   This chapter is dense in exactly those constructs - stacked \tfrac
   quotients, \dot{\T{F}}, \| \cdot \| and 3x3 \begin{bmatrix} blocks - which
   are the shapes that overflow the strut. Carried over from 4RA10, where the
   clipping was measured; here it is applied pre-emptively.

   Padding enlarges the padding box, which is where overflow actually clips,
   so the glyphs fit. The "(n)" equation number is a sibling flex item with
   align-self:center, so it stays vertically aligned. */
.overflow-x-auto.overflow-y-hidden:has(> .katex-display) {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}


/* ---------------------------------------------------------------------------
   TU/e MechE logo in the primary sidebar footer.

   `site.parts.primary_sidebar_footer` in myst.yml supplies the logo; book-theme
   falls back to its "Made with MyST" badge only when that part is empty. The
   part is rendered as ordinary article content, which brings two defaults that
   do not suit a logo: the image fills the column width, and the outbound link
   picks up the theme's external-link arrow. */
.myst-primary-sidebar-footer img {
  /* 13rem wide is ~31px tall at this wordmark's 6.79:1 aspect, close to the
     h-9 (36px) navbar mark so the two read as a pair. The sidebar column is
     ~245px, so capping at 100% keeps the mark off the edges on narrow windows. */
  width: 13rem;
  max-width: 100%;
}

.myst-primary-sidebar-footer .link-icon {
  display: none;
}

/* The wordmark is half black, which disappears on the dark theme's near-black
   sidebar. The navbar logo has `logo_dark` for this; a part has no such hook
   and no filter turns black into white while sparing the orange, so myst.yml
   emits both artworks and only the right one is shown. The part strips the
   paragraph wrappers, so the two linked images end up as bare sibling <a>s. */
.myst-primary-sidebar-footer a:nth-of-type(2) {
  display: none;
}

html.dark .myst-primary-sidebar-footer a:nth-of-type(1) {
  display: none;
}

html.dark .myst-primary-sidebar-footer a:nth-of-type(2) {
  display: inline;
}

/* The navbar home link keeps its "Made with MyST" span even once a logo is set
   - book-theme only adds Tailwind's `sr-only` to it, so it stays in the
   accessible name and screen readers announce "Eindhoven University of
   Technology, Made with MyST". The `logo_alt` on the <img> already names the
   link, so drop the span. (Setting `logo_text` instead would overwrite the
   string, but it also un-hides the span and prints the text beside the logo.) */
.myst-home-link > span.sr-only {
  display: none;
}


/* ---------------------------------------------------------------------------
   Welcome page.

   Welcome.md puts the step-by-step model of a compression test in a figure with
   class welcome-hero and the two card grids in welcome-equations / welcome-parts,
   so these rules touch no other page. The figure spans the text column (unlike the
   wider col-page-right hero of 4RA10). The widget itself (Media/Welcome/model.mjs,
   checked by sim/model_check.mjs) renders inside a shadow root and carries its own
   styles, so nothing here reaches into it. */
.welcome-hero {
  margin-top: 0.5rem;
  margin-bottom: 2.5rem;
}

.welcome-hero figcaption {
  font-size: 0.9rem;
  text-align: left; /* long caption; the centring above suits one-line captions only */
}

/* The part cards are whole-card links; the theme already turns the border blue
   on hover, this adds a slight lift and an arrow so they read as links at rest. */
.welcome-parts .myst-card {
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.welcome-parts .myst-card:hover {
  transform: translateY(-2px);
}

.welcome-parts .myst-card-title::after {
  content: " \2192";
  font-weight: 400;
}

@media (prefers-reduced-motion: reduce) {
  .welcome-parts .myst-card,
  .welcome-parts .myst-card:hover {
    transition: none;
    transform: none;
  }
}