@import "fonts.css";

:root {
  --BOX-BLUE-color: #4caad9;
  --BOX-GREEN-color: #6bb390;
  --BOX-RED-color: #e57773;

  --CODE-font: "Roboto-Mono", monospace;
  --MAIN-font: "Roboto", sans-serif;
}

pre {
  padding: 0px !important;
}

abbr {
  border-bottom: none !important;
  text-decoration: none !important;
}

#R-body article a:hover > img:only-child:empty,
#R-body article a:active > img:only-child:empty,
#R-body article a:focus > img:only-child:empty {
  outline: none;
}

#R-footer {
  text-align: center;
}

.fa-plus {
  color: #6bb390;
}

.fa-minus {
  color: #fc7c78;
}

h1 {
  text-transform: none;
}

code {
  font-size: 90% !important;
}

#R-body .tab-nav-button.active > .tab-nav-text {
  font-weight: 500;
  text-shadow: none;
  -webkit-text-stroke-width: 0;
}

/* Relearn 9 needs collapsibleMenu to render complete subtrees. Keep the old
   presentation without expand controls. */
#R-sidebar .R-shortcutmenu-main ul.collapsible-menu > li > input,
#R-sidebar .R-shortcutmenu-main ul.collapsible-menu > li > label {
  display: none;
}

#R-body .tab-nav-button:not(.active),
#R-body .tab-nav-button:not(.active):hover,
#R-body .tab-nav-button:not(.active):active,
#R-body .tab-nav-button:not(.active):focus {
  color: var(--INTERNAL-MAIN-TEXT-color);
}

#R-body .tab-nav-button:not(.active):hover > .tab-nav-text,
#R-body .tab-nav-button:not(.active):active > .tab-nav-text,
#R-body .tab-nav-button:not(.active):focus > .tab-nav-text {
  border-bottom-color: var(--VARIABLE-BOX-color);
}

.related-title {
  position: relative;
  margin-top: 3.4em;
  padding-top: 1.2em;
  text-align: center;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  font-size: 1.2em;
}

.related-title::after {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 4px;
  background: var(--ACCENT-color);
}

/* ===== expand toggle ===== */

.expand-toggleall--page {
  margin: 10px 0 16px 0;
  display: flex;
  justify-content: flex-end;
}

/* ===== group (category card) ===== */

.expand-group {
  margin: 1.6rem 0;
  border-radius: 12px;

  border: 1px solid rgba(140, 140, 140, 0.25);
  background: rgba(44, 15, 148, 0.06);
  transition: border-color 0.2s ease;
}

.expand-group:hover {
  border-color: rgba(140, 140, 140, 0.45);
}

.expand-group__header {
  display: flex;
  align-items: baseline;
  gap: 12px;

  padding: 14px 14px 10px 14px;
  background: transparent;
}

.expand-group__title {
  margin: 0;
  font-weight: 550;
  font-size: 1.5rem;
  user-select: text;
}

/* одинаковый цвет заголовков (категория + пункты) */
.expand-group__title,
.expand-group__title a,
.expand-item__title,
.expand-item__title a {
  color: var(--MAIN-TITLES-TEXT-color);
}

.expand-group__actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;

  opacity: 0.8;
  transition: opacity 0.15s ease;
}

.expand-group:hover .expand-group__actions {
  opacity: 1;
}

.expand-group__content {
  padding: 0 6px 8px 6px;
}

/* ===== Expand All ===== */

.expand-toggleall__btn {
  appearance: none;
  border: none;
  background: transparent;

  padding: 2px 6px;

  font-size: 0.85rem;
  font-weight: 500;

  color: rgba(120, 120, 120, 0.9);
  cursor: pointer;

  transition: color 0.15s ease;
}

.expand-toggleall__btn:hover {
  color: rgba(90, 90, 90, 1);
  text-decoration: underline;
}

/* ===== items ===== */

.expand-item {
  margin: 0;
  border: 0;
}

/* разделитель между пунктами */
.expand-group__content .expand-item+.expand-item {
  border-top: 1px solid rgba(140, 140, 140, 0.18);
}

.expand-item summary {
  list-style: none;
}

.expand-item summary::-webkit-details-marker {
  display: none;
}

/* clickable row */

.expand-item__summary {
  display: flex;
  align-items: center;
  gap: 0.7rem;

  padding: 12px 10px 10px 18px;

  cursor: pointer;
  user-select: text;

  border-radius: 10px;
  transition: background 0.15s ease;
}

.expand-item__summary:hover {
  background: rgba(140, 140, 140, 0.10);
}

/* hierarchy */

.expand-item__title {
  font-weight: 550;
  font-size: 1.3rem;
  line-height: 1.35;
}

/* content */

.expand-item__content {
  padding: 10px 10px 14px 46px;
}

/* если закрыто — не держим лишний top padding */
.expand-item:not([open]) .expand-item__content {
  padding-top: 0;
}

/* ===== arrow ===== */

.expand-item__arrow::before {
  content: "";
  display: inline-block;

  width: 0.50rem;
  height: 0.50rem;

  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;

  transform: rotate(-45deg);
  transition: transform 0.2s ease;

  margin-top: -2px;
  opacity: 0.8;
}

details[open] .expand-item__arrow::before {
  transform: rotate(45deg);
}

/* ===== copy link (#) ===== */

.copy-link {
  appearance: none;
  border: none;
  background: transparent;

  padding: 2px 4px;

  font-size: 0.85rem;
  font-weight: 600;

  color: rgba(120, 120, 120, 0.9);
  cursor: pointer;

  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
}

/* show only on hover */
.expand-item:hover .copy-link,
.expand-group:hover .copy-link {
  opacity: 0.6;
}

.copy-link:hover {
  opacity: 1;
  color: rgba(90, 90, 90, 1);
}

/* align # right */
.copy-link--item {
  margin-left: auto;
}

/* ===== plain items ===== */

.expand-item__summary--plain {
  cursor: default;
  /* тот же левый padding, что у обычных пунктов */
  padding-left: 18px;
}

.expand-item__summary--plain:hover {
  background: rgba(140, 140, 140, 0.10);
}

.expand-item__summary--plain::before {
  content: "*";
  margin-bottom: 4px;
  display: inline-block;

  margin-top: -2px;
  margin-left: 2px;

  height: 0.70rem;
  opacity: 0.8;
}