/* CSS Variables */
:root {
  /* Colors */
  --color-text: #272727;
  --color-background: #FFFFFF;
  --color-background-dark: #1f1f20;
  --color-background-accent: #F7F7F7;
  --color-blockquote-border: #CAC7C0;
  --color-button-outline-border: #b8b8b5;
}

/* Base styles */

body {
  font-family: 'Roboto Flex', system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.618;
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
}

/* Typography */
h1, h2, h3, .glossary-term {
  font-family: 'Roboto Flex', system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  line-height: 1.3;
  padding: 0 20px;
  margin-top: 50px;
  margin-bottom: 10px;
}

/* Visually hidden elements for SEO, screen readers and machine parsers (LLMs)
   These elements are completely invisible to users but remain in the DOM
   for accessibility tools, search engines, and AI assistants to parse */
.site-heading,
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

h2, .glossary-term {
  font-size: 26px;
  margin-bottom: 30px;
}

h2 > .badge {
  font-weight: 400;
  opacity: 0.3;
}

h2.sub-header {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.618;
  opacity: 0.5;
  margin-top: 40px;
  margin-bottom: 0;
}

h2.sub-header + h2 {
  margin-top: 15px;
}

p {
  padding: 0 20px;
  margin-bottom: 24px;
}

ul {
  list-style: none;
  padding: 0 20px;
  margin-bottom: 24px;
}

.dashed-list li {
  position: relative;
  left: 0;

  padding-left: 1.2em;
  padding-bottom: 0.25em;
}

.dashed-list li:before {
  content: "\2014\a0\a0";
  position: absolute;
  left: 0;
}

.long-text li {
  padding-bottom: 1.2em;
}

blockquote {
  font-weight: 500;
  padding: 0;
  margin: 30px 0 30px 20px;
  border-left: 4px solid var(--color-blockquote-border);
}

img {
  display: block;
  width: 100%;
  height: auto;
}

/* Images - Breakout effect on desktop */
figure,
.quote-block {
  margin: 40px 0;
  padding: 0;
}

hr {
  border: none;
  border-top: 1px solid var(--color-blockquote-border);
  margin: 40px 0;
}

/* Quote block - featured quote with background */
.quote-block {
  background-color: var(--color-background-accent);
  padding: 60px 60px;
  border: none;
}

.quote-block p {
  margin: 0 auto;
  padding: 0;
  font-size: 1.1em;
  max-width: max-content;
  text-align: left;
}

.quote-block p:last-child {
  margin-bottom: 0;
}

/* Layout */
.container {
  max-width: 680px;
  margin: 0 auto;
  padding: 0;
}

/* Hero Header */
.hero-header {
  padding: 0;
  margin-bottom: 30px;
  background-color: var(--color-background-dark); /* Dark background extending outside on wide screens */
}

.hero-wrapper {
  position: relative;
  width: 100%;
  max-width: 680px; /* Constrain image to content width */
  margin: 0 auto;   /* Center image */
}

.hero-image {
  display: block;
  width: 100%;
  height: auto;
}

.hero-icon {
  display: block;
  position: absolute;
  z-index: 10;
  transition: opacity 0.3s ease;
  opacity: 0.3;
}

.hero-icon img {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1); /* Force white color */
}

.hero-icon:hover {
  opacity: 1;
}

.hero-contacts {
  position: absolute;
  top: 6.5%;
  right: 9%;
  display: flex;
  flex-direction: column;
  gap: 34px; /* Fixed spacing between icons */
  align-items: center;
}

.icon-phone {
  width: 15px;
  position: relative;
}

.icon-telegram {
  width: 22px;
  position: relative;
}

.icon-location {
  width: 17px;
  position: relative;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.location-tooltip {
  position: absolute;
  left: 50%;
  top: calc(100% + 12px);
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}

.location-tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.9);
}

.location-tooltip.active {
  opacity: 1;
  visibility: visible;
}

.icon-scroll {
  width: 7.5%; /* Approx 32px / 430px */
  min-width: 32px;
  left: 50%;
  transform: translateX(-50%);
  bottom: 4%;
  cursor: pointer;
  opacity: 0.3;
}

.icon-scroll:hover {
  opacity: 1;
}

.icon-scroll:active,
.icon-scroll:focus,
.icon-scroll:visited {
  opacity: 0.3;
}

/* Footer */
.site-footer {
  padding: 20px 20px 160px 20px;
}

.footer-contacts {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.footer-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--color-text);
  transition: opacity 0.3s ease;
}

.footer-link:hover {
  opacity: 0.8;
}

.footer-location {
  cursor: default;
  gap: 8px;
}

.footer-location:hover {
  opacity: 1;
}

.footer-icon {
  width: 24px;
  height: 24px;
  display: block;
  opacity: 0.4;
  filter: brightness(0); /* Force black color */
}

.footer-icon-location {
  width: 27px;
  height: 27px;
}

.footer-copyright,
.footer-echo {
  margin-top: 40px;
  font-size: 14px;
  opacity: 0.5;
}

.footer-echo {
  margin-top: 10px;
}

/* Базовый стиль для всех кнопок */
.button {
  display: flex;
  align-items: center;
  font-size: 15px;
  line-height: 15px;
  padding: 17px 30px 18px 30px;
  border: 2px solid var(--color-button-outline-border);
  border-radius: 60px;
  cursor: pointer;
  background: transparent;
  color: inherit;
  transition: all 0.3s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.button:hover {
  border-color: var(--color-text);
}

.button .badge {
  align-self: end;
  font-size: 0.8em;
  line-height: 1em;
  opacity: 0.5;
  margin-left: 5px;
}

/* Специфичные стили для кнопки раскрывашки */
.collapsible-button {
  width: 100%;
  justify-content: space-between;
  gap: 10px;
}

/* Collapsible Block */
.collapsible-container {
  width: 100%;
  padding: 0;
  margin: 40px 0;
}

.collapsible-button-container {
  padding: 0 20px;
}

.button-text {
  flex-grow: 1;
  text-align: left;
}

.button-arrow {
  width: 14px;
  height: 8px;
  margin-top: 2px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  filter: brightness(0);
}

.collapsible-button.active .button-arrow {
  transform: rotate(180deg);
}

/* Outer container: animates height */
.collapsible-body {
  height: 0;
  overflow: hidden;
  transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Inner container: animates transform and opacity */
.collapsible-content {
  padding: 30px 0 0 0;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
        opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.collapsible-content > h2:first-child {
  margin-top: 0;
}

/* Glossary Links */
.term-link {
  text-decoration: none;
  color: inherit;
  border-bottom: 1px dotted rgba(0, 0, 0, 0);
  cursor: help;
  transition: border-bottom-color 0.3s ease;
}

.term-link:hover {
  border-bottom-color: rgba(0, 0, 0, 0.8);
}

/* Glossary Page Specifics */
.glossary-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 80px;
}

.glossary-item {
  position: relative;
}

/* Anchor positioning */
.glossary-anchor {
  position: absolute;
  top: -50px;
  visibility: hidden;
}

/* Navigation Back Link */
.back-link {
  display: inline-block;
  padding: 0 20px;
  margin-top: 40px;
  margin-bottom: 40px;
  text-decoration: none;
  color: var(--color-text);
  opacity: 0.5;
  font-size: 14px;
  transition: opacity 0.3s ease;
}

.back-link:hover {
  opacity: 1;
}

.glossary-def {
  margin: 0;
}



/* Sticky Header for Glossary */
.sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  background-color: rgba(255, 255, 255, 0.95); /* --color-background with opacity */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 1000;
  transform: translateY(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding: 12px 0;
}

.sticky-header.visible {
  transform: translateY(0);
}

.sticky-header .container {
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.button-back-sticky {
  padding: 10px 24px;
  font-size: 14px;
  gap: 12px;
  border-width: 1px;
}

.button-back-sticky:hover {
  border-color: var(--color-text);
}

/* Mobile styles (default) are above. 
   Tablet and Desktop overrides below. */

/* Tablets and small desktops */
@media (min-width: 481px) {
  .footer-contacts {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 34px;
    align-items: center;
  }
  body {
    font-size: 19px;
  }

  h2, .glossary-term {
    font-size: 32px;
  }
}

/* Desktop */
@media (min-width: 768px) {
  body {
    font-size: 20px;
  }

  h1, h2, h3, .glossary-term {
    margin-top: 60px;
  }

  .button {
    font-size: 18px;
    line-height: 18px;
  }

  figure,
  .quote-block {
    margin: 50px 0;
  }

  /* Breakout images */
  .breakout {
    width: 120%;
    margin-left: -10%;
    max-width: none;
  }
}