/* Основания решений: md/site-style.md */

@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/lora-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/lora-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/lora-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/lora-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/manrope-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

:root {
  --surface: #f7f3ea;
  --paper: #fffdf8;
  --ivory: #eee8dc;
  --line: #ddd4c5;
  --ink: #202520;
  --body-text: #454c46;
  --muted: #636a64;
  --pine: #0c2d26;
  --pine-mid: #17453a;
  --bronze: #a57b50;
  --bronze-dark: #705138;

  --font-display: "Lora", Georgia, "Times New Roman", serif;
  --font-ui: "Manrope", "Segoe UI", Arial, sans-serif;

  --bs-body-font-family: var(--font-ui);
  --bs-body-bg: var(--surface);
  --bs-body-bg-rgb: 247, 243, 234;
  --bs-body-color: var(--body-text);
  --bs-body-color-rgb: 69, 76, 70;
  --bs-emphasis-color: var(--ink);
  --bs-emphasis-color-rgb: 32, 37, 32;
  --bs-secondary-color: var(--muted);
  --bs-secondary-color-rgb: 99, 106, 100;
  --bs-secondary-bg: var(--ivory);
  --bs-secondary-bg-rgb: 238, 232, 220;
  --bs-tertiary-bg: var(--ivory);
  --bs-tertiary-bg-rgb: 238, 232, 220;
  --bs-tertiary-color: var(--muted);
  --bs-tertiary-color-rgb: 107, 115, 108;
  --bs-border-color: var(--line);
  --bs-link-color: var(--pine-mid);
  --bs-link-hover-color: var(--pine);
  --bs-link-color-rgb: 23, 69, 58;
  --bs-link-hover-color-rgb: 12, 45, 38;
  --bs-primary: var(--pine-mid);
  --bs-primary-rgb: 23, 69, 58;
  --bs-secondary: var(--bronze);
  --bs-secondary-rgb: 165, 123, 80;
  --bs-heading-color: var(--bronze-dark);
}

[data-bs-theme="dark"] {
  --surface: #161f1b;
  --paper: #1e2a25;
  --ivory: #253530;
  --line: #34473f;
  --ink: #f2ede2;
  --body-text: #cdd4cc;
  --muted: #8f9d95;
  --pine: #9fc3b0;
  --pine-mid: #6f9c88;
  --bronze: #d3a874;
  --bronze-dark: #b0875a;

  --bs-body-bg: var(--surface);
  --bs-body-bg-rgb: 22, 31, 27;
  --bs-body-color: var(--body-text);
  --bs-body-color-rgb: 205, 212, 204;
  --bs-emphasis-color: var(--ink);
  --bs-emphasis-color-rgb: 242, 237, 226;
  --bs-secondary-color: var(--muted);
  --bs-secondary-color-rgb: 143, 157, 149;
  --bs-secondary-bg: var(--ivory);
  --bs-secondary-bg-rgb: 37, 53, 48;
  --bs-tertiary-bg: var(--ivory);
  --bs-tertiary-bg-rgb: 37, 53, 48;
  --bs-tertiary-color: var(--muted);
  --bs-tertiary-color-rgb: 138, 153, 144;
  --bs-border-color: var(--line);
  --bs-link-color: var(--pine);
  --bs-link-hover-color: var(--bronze);
  --bs-link-color-rgb: 159, 195, 176;
  --bs-link-hover-color-rgb: 211, 168, 116;
  --bs-primary: var(--pine-mid);
  --bs-primary-rgb: 111, 156, 136;
  --bs-secondary: var(--bronze);
  --bs-secondary-rgb: 211, 168, 116;
  --bs-heading-color: var(--bronze);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display);
  color: var(--bs-heading-color);
}

.navbar {
  --bs-navbar-color: rgba(23, 69, 58, 0.85);
  --bs-navbar-hover-color: var(--pine);
  --bs-navbar-active-color: var(--ink);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2823, 69, 58, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .navbar {
  --bs-navbar-color: rgba(var(--bs-secondary-rgb), 0.9);
  --bs-navbar-hover-color: rgba(var(--bs-secondary-rgb), 1);
}

[data-bs-theme="dark"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28211, 168, 116, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.text-secondary {
  color: rgba(23, 69, 58, var(--bs-text-opacity, 1)) !important;
}

[data-bs-theme="dark"] .text-secondary {
  color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity, 1)) !important;
}

a {
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  text-decoration-style: dotted;
  text-decoration-skip-ink: auto;
  text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}

a:hover {
  text-decoration-color: currentColor;
}

summary.more {
  cursor: pointer;
  width: fit-content;
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  text-decoration-style: dotted;
  text-decoration-skip-ink: auto;
  text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
}

summary.more:hover {
  text-decoration-color: currentColor;
}

a[href^="http"]:not([href^="https://tem-transforms.ru"]):not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand) {
  text-decoration-style: solid;
  text-decoration-thickness: 0.08em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

a[href^="http"]:not([href^="https://tem-transforms.ru"]):not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand)::after {
  content: "\2197";
  display: inline-block;
  margin-left: 0.1em;
  font-size: 0.8em;
  opacity: 0.75;
  text-decoration: none;
}

.nav-link:hover,
.dropdown-toggle:hover,
.dropdown-item:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.dropdown-menu {
  --bs-dropdown-bg: var(--surface);
  --bs-dropdown-border-color: var(--line);
  --bs-dropdown-link-color: rgba(23, 69, 58, 0.85);
  --bs-dropdown-link-hover-color: var(--pine);
  --bs-dropdown-link-hover-bg: var(--ivory);
  --bs-dropdown-link-active-color: var(--ink);
  --bs-dropdown-link-active-bg: var(--ivory);
}

[data-bs-theme="dark"] .dropdown-menu {
  --bs-dropdown-link-color: rgba(var(--bs-secondary-rgb), 0.9);
  --bs-dropdown-link-hover-color: rgba(var(--bs-secondary-rgb), 1);
}

.card {
  border-color: var(--bs-border-color);
  background-color: var(--bs-tertiary-bg);
}

.btn-outline-secondary {
  --bs-btn-color: var(--pine);
  --bs-btn-border-color: var(--pine-mid);
  --bs-btn-hover-color: var(--surface);
  --bs-btn-hover-bg: var(--pine-mid);
  --bs-btn-hover-border-color: var(--pine-mid);
  --bs-btn-active-color: var(--surface);
  --bs-btn-active-bg: var(--pine-mid);
  --bs-btn-active-border-color: var(--pine-mid);
}

.btn-primary {
  --bs-btn-color: var(--surface);
  --bs-btn-bg: var(--pine-mid);
  --bs-btn-border-color: var(--pine-mid);
  --bs-btn-hover-color: var(--surface);
  --bs-btn-hover-bg: var(--pine);
  --bs-btn-hover-border-color: var(--pine);
  --bs-btn-active-color: var(--surface);
  --bs-btn-active-bg: var(--pine);
  --bs-btn-active-border-color: var(--pine);
  color: var(--surface);
  background-color: var(--pine-mid);
  border-color: var(--pine-mid);
}

.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary:active {
  color: var(--surface);
  background-color: var(--pine);
  border-color: var(--pine);
}

[data-bs-theme="dark"] .btn-primary {
  --bs-btn-color: var(--surface);
  --bs-btn-bg: var(--pine-mid);
  --bs-btn-border-color: var(--pine-mid);
}

.theme-toggle {
  margin-left: 8px;
}

.icon,
.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  vertical-align: -2px;
}

.theme-toggle .icon-sun {
  display: none;
}

[data-bs-theme="dark"] .theme-toggle .icon-sun {
  display: inline-block;
}

[data-bs-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

hr {
  margin: 4.5rem 0 1.5rem;
  opacity: .3;
}

.section-title {
  color: var(--ink);
  font-size: 1.55rem;
  margin-bottom: .75rem;
}

.hero-meta {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--bs-body-color);
}

body {
  overflow-x: clip;
  color: var(--body-text);
  background-color: var(--surface);
  font-family: var(--font-ui);
}

.band {
  background-color: var(--ivory);
  border-top: 1px solid var(--bs-border-color);
  border-bottom: 1px solid var(--bs-border-color);
  margin-block: 4.5rem;
  margin-inline: calc(50% - 50vw);
  padding: 2.5rem calc(50vw - 50%) 1.25rem;
}

.band .card {
  background-color: var(--surface);
}

.hcaptcha-frame {
  min-height: 78px;
  max-width: 100%;
  overflow: hidden;
}

@media (max-width: 359.98px) {
  .consent-gate-card {
    padding-right: .75rem !important;
    padding-left: .75rem !important;
  }

  .hcaptcha-frame {
    min-height: 64px;
  }

  .hcaptcha-frame .h-captcha {
    width: 303px;
    transform: scale(.82);
    transform-origin: left top;
  }
}

.modal-review .modal-content {
  border-top: 3px solid var(--bs-secondary);
}

.faq-anchor {
  text-decoration: none;
  color: var(--bs-secondary-color);
}

.faq-anchor:hover {
  color: var(--bs-secondary);
}

.portrait {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 360px;
  margin-inline: auto;
}

/* Ключ кабинета в шапке: у вошедшего клиента он зеленый и с именем рядом.
   На узком экране имя прячется, ключ остается. */
.cabinet-key,
.site-home {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .6rem;
  color: var(--bs-secondary-color);
  text-decoration: none;
  border-radius: .5rem;
}

.cabinet-key:hover,
.cabinet-key:focus,
.site-home:hover,
.site-home:focus {
  color: var(--bs-body-color);
  background-color: var(--bs-tertiary-bg);
}

.cabinet-key-active {
  color: var(--bs-success);
}

.cabinet-key-active:hover,
.cabinet-key-active:focus {
  color: var(--bs-success);
}

.cabinet-key-name {
  font-size: .95rem;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .cabinet-key-name {
    display: none;
  }
}

/* Граница между пунктами сайта и пунктами кабинета: на широком экране -
   вертикальная черта, в свернутом меню - горизонтальная с подписью. */
.nav-divider {
  background-color: var(--bs-border-color);
}

.nav-caption span {
  display: block;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

@media (min-width: 768px) {
  .nav-divider {
    align-self: center;
    width: 1px;
    height: 1.4rem;
    margin: 0 .75rem;
  }

  .nav-caption {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .nav-divider {
    width: 100%;
    height: 1px;
    margin: .75rem 0 .5rem;
  }

  .nav-caption span {
    padding: .1rem .5rem .35rem;
  }
}