/* [NT Pharmacy Reborn] wider content column -- Material's default .md-grid
   max-width (61rem/~1220px) left a lot of unused horizontal space on
   anything wider than a laptop, and made the side-by-side image layout
   below (.panel-row) cramped. Widened to 80rem; sidebars/nav keep their
   own width via Material's grid, this only affects the content column. */
.md-grid {
  max-width: 80rem;
}

/* [NT Pharmacy Reborn] site accent -- the same turquoise as the home
   page's hero image background (docs/ru/img/hero.png, sampled:
   rgb(47,154,161) / #2f9aa1), not a stock Material palette name (indigo,
   teal, cyan, ... none matched exactly). Setting the CSS custom properties
   directly, instead of theme.palette.primary/accent in mkdocs.yml, is what
   lets it be this exact hex. --md-primary-fg-color drives the top app bar,
   the navigation.tabs bar, and the sidebar's active-item accent, in both
   light and dark palette -- kept constant across schemes on purpose, as
   one consistent brand color rather than a light/dark-specific one.
   [NT Pharmacy Reborn bugfix, real one, found live] a plain :root override
   of --md-primary-fg-color (Material's own documented trick) does NOT win
   here: Material's own palette.css re-declares these same vars keyed off
   the data-md-color-primary=indigo attribute, and that attribute lives on
   body, not html. Body is a descendant of html, so its own declaration
   shadows anything set on :root for every element under it (custom
   property resolution walks up to the nearest declaring ancestor, it
   isn't a same-element specificity contest) -- regardless of which
   stylesheet loads last. Matching Material's own attribute selector here,
   so the two rules target the same element and extra.css (loaded after
   main/palette) wins on ordinary source order, is what actually works.
   Caught a second, separate bug in the process: this file's very first
   comment used a glob-style docs-folder path with an asterisk directly
   before a closing slash, which read as an early end-of-comment marker to
   the CSS parser and silently corrupted every rule after it, including
   this override, until the file's next real comment terminator resynced
   the parser. Avoid that character pair inside any comment below. */
[data-md-color-primary="indigo"] {
  --md-primary-fg-color: #2f9aa1;
  --md-primary-fg-color--light: #69b6bb;
  --md-primary-fg-color--dark: #226f74;
  /* Body-text link color (--md-typeset-a-color) is a SEPARATE variable from
     --md-primary-fg-color above -- Material's palette.css hardcodes it to a
     fixed indigo hex here rather than referencing --md-primary-fg-color, so
     overriding the latter alone left links indigo-blue instead of turquoise. */
  --md-typeset-a-color: #2f9aa1;
}
/* Material re-hardcodes --md-typeset-a-color AGAIN, to a different indigo
   hex, specifically for dark/slate scheme -- that rule has two attribute
   selectors (scheme + primary) vs. one above, so it wins there on
   specificity alone regardless of source order. Matching it exactly is the
   only way the dark palette gets the same turquoise instead of falling back
   to indigo (this was the "only correct in light theme" bug). */
[data-md-color-scheme="slate"][data-md-color-primary="indigo"] {
  --md-typeset-a-color: #2f9aa1;
}

/* Section headings ("## Что это", "## Зависимости", "## Разделы" and their
   equivalents on every other page) in the same turquoise as the nav chrome
   above, so a page's own subcategory titles read as part of the same
   accent rather than plain body-color text. */
.md-typeset h2 {
  color: var(--md-primary-fg-color);
}

/* Chapter names in the sidebar/drawer nav (Главная, Аптекарь, Справочник,
   ...) in bold, to set them apart from the nested items toc.integrate now
   lists under the current page (that page's own "## " headings, e.g. Home's
   Что это / Зависимости / Разделы) -- those stay regular weight so the
   chapter list still reads as one level above its own sub-sections. Direct
   children of .md-nav--primary's top list are exactly the chapters; anything
   toc.integrate nests one level deeper is a sub-heading, not a chapter. */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link {
  font-weight: 700;
}

/* Text-beside-image layout, vertically centered on the image's height.
   Markup (needs md_in_html so the nested Markdown -- tables, bold, links --
   actually renders instead of passing through as raw text):

     <div class="panel-row" markdown="1">
     <div class="panel-row-image" markdown="1">
     ![alt](img.png)
     </div>
     <div class="panel-row-text" markdown="1">
     text / table here
     </div>
     </div>

   DOM order decides left/right (image div first = image on the left);
   there is no left/right modifier class, just reorder the two inner divs.
   A flex row (not float) is what makes the vertical centering possible --
   floats only ever align to the top of the text that wraps around them. */
.panel-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 1.5rem 0;
}
.panel-row-image {
  flex: 0 0 auto;
  max-width: 45%;
}
.panel-row-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 0;
}
.panel-row-text {
  flex: 1 1 0%;
  min-width: 0;
}
/* tables/paragraphs from the nested Markdown carry their own top/bottom
   margins meant for stacked block flow; inside a centered flex row that
   just pushes the text off-center, so zero them out on the first/last
   child instead of fighting the flex centering with negative margins. */
.panel-row-text > :first-child {
  margin-top: 0;
}
.panel-row-text > :last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 44rem) {
  .panel-row {
    flex-direction: column;
    align-items: stretch;
  }
  .panel-row-image {
    max-width: 100%;
  }
}

/* [NT Pharmacy Reborn] data tables default to full-width block flow;
   center them as blocks instead since their content is narrower than the
   widened .md-grid column. Wrapped as
   <div class="centered-table" markdown="1">...table...</div> (needs
   md_in_html) rather than a trailing attr_list "{: .centered-table }" --
   tried that first, but python-markdown's table block processor swallows a
   same-block trailing line as a garbage extra row instead of handing it to
   attr_list. */
.centered-table {
  text-align: center;
}
/* The wrapper div is a block (100% of the column width), so margin: auto
   on IT does nothing -- a block with an implicit width already fills its
   container. <table> itself defaults to shrink-to-fit sizing, so centering
   it directly (with the wrapper just centering it via text-align, which
   inline-level/table-level boxes respect) is what actually moves it. */
.centered-table table {
  margin-left: auto;
  margin-right: auto;
  text-align: initial;
}

/* Single standalone image, centered as a block (no accompanying text). */
.centered-image {
  text-align: center;
  margin: 1.5rem 0;
}
.centered-image img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

/* Row of icons with a caption under each, e.g. the three pill-bottle tiers
   in storage.md. Markup:

     <div class="icon-row" markdown="1">
     <div class="icon-row-item" markdown="1">
     ![alt](img.png)
     *Caption.*
     </div>
     ... more .icon-row-item ...
     </div> */
.icon-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 1.5rem 0;
}
.icon-row-item {
  flex: 1 1 0%;
  min-width: 8rem;
  text-align: center;
}
.icon-row-item img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 4px;
}
.icon-row-item em {
  display: block;
  margin-top: 0.5rem;
}

/* Contrast frame around a screenshot block (with or without accompanying
   text) -- a rounded, bordered card that separates it from the surrounding
   plain-text flow. Wraps one of .panel-row / .icon-row / .centered-image,
   or a plain image+caption, as its only child:

     <div class="shot-frame" markdown="1">
     <div class="panel-row" markdown="1"> ... </div>
     </div>

   The inner layout's own margin is zeroed so it doesn't double up with the
   frame's padding. */
.shot-frame {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  background: var(--md-code-bg-color);
}
.shot-frame > .panel-row,
.shot-frame > .icon-row,
.shot-frame > .centered-image {
  margin: 0;
}
.shot-frame > p:last-child,
.shot-frame > .centered-image > p:last-child {
  margin-bottom: 0;
}