/* файл: style.css */

/* ==== Кореневі властивості ==== */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  display: block;        /* вертикальний потік */
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}


/* ==== Сайдбар ==== */
#sidebar {
  width: 300px;
  background: #fff;
  padding: 1rem;
  box-sizing: border-box;
  border-right: 1px solid #ddd;
  height: 100vh;      /* панель завжди висотою Viewport */
  overflow-y: auto;   /* вертикальний скрол якщо контент більший */
}

#sidebar h1 {
  margin: 0 0 1rem;
  font-size: 1.25rem;
}

/* ==== Кнопки у сайдбарі ==== */

/* ==== Робоча область ==== */
#content {
  flex: 1;            /* займає весь простір поруч із сайдбаром */
  display: flex;      /* дає можливість дитині розтягуватися */
  min-height: 0;      /* дозволяє «просісти» flex-потомку */
  overflow: hidden;   /* обрізає все зайве */
}

/* ==== Контейнер глобуса ==== */
#globus {
  flex: 1;            /* тягнеться на весь простір #content */
  min-height: 0;      /* не тримає зайвої висоти */
  position: relative; /* для абсолютного позиціювання внутрішніх елементів */
}

/* ==== Саме полотно WebGL ==== */
#globus canvas {
  display: block;          /* прибирає можливі inline-прогалини */
  width:  100% !important; /* займає весь контейнер */
  height: 100% !important; /* займає весь контейнер */
}

/* ==== Info Panel ==== */
#info-panel {
  position: absolute;
  top: 80px;
  right: 20px;
  width: 280px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  font-family: sans-serif;
  z-index: 10;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

#info-panel.hidden {
  display: none;
}

#info-panel .info-panel__title {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

#info-panel .info-panel__description {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

#info-panel .info-panel__unit {
  font-style: italic;
  text-align: right;
  font-size: 0.85rem;
}

.info-panel__row {
  margin-top: 4px;
  font-size: 14px;
}

.info-panel__row .scaled {
  color: #555;
}

/* ==== Перемикач мов ==== */
#lang-switch {
  position: absolute;
  top: 20px;
  right: 30px;
  z-index: 10;

  display: flex;
  align-items: center;
  gap: 15px;
}


.lang-option {
  color: white;
  font-weight: bold;
  cursor: pointer;
  font-size: 16px;
  user-select: none;
  transition: color 0.2s;
}

.lang-option:hover {
  color: #aaa;
}

.lang-option.active {
  color: #127def; /* синій */
}


/* ==== 1) Дозволяємо обгортці зайняти весь простір #globus ==== */
#globus > .og-inner {
  position: absolute;
  top:    0;
  left:   0;
  right:  0;
  bottom: 0;
}

/* ==== 2) Ховаємо всі прямі діти .og-inner, крім самого <canvas> ==== */
#globus > .og-inner > *:not(canvas) {
  display: none !important;
}
/* Субтильний світлий скролбар для #sidebar */
#sidebar {
  /* для Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}

/* для WebKit-браузерів (Chrome, Edge, Safari) */
#sidebar::-webkit-scrollbar {
  width: 8px;
}

#sidebar::-webkit-scrollbar-track {
  background: transparent;
}

#sidebar::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

#sidebar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

/* ==== Блок 1: Фонова секція intro ==== */
#intro {
  height: 80vh;
  background: url('../res/orbitanica.png') center center / cover no-repeat;
  position: relative;
  color: white;
}

/* Центруємо .intro-notice і .intro-overlay вертикально */
.intro-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2em;
  text-align: center;
  padding: 0 1em;
}

/* Темна рамка для повідомлення */
.intro-notice {
  background-color: rgba(0, 0, 0, 0.4);
  padding: 1.5em 2em;
  border-radius: 10px;
  max-width: 600px;
  font-size: 1.5em;
  font-weight: bold;
}

/* Прозорий опис */
.intro-overlay {
  max-width: 800px;
  font-size: 1.2em;
  line-height: 1.6em;
  color: #fff;
}


#intro h1 {
  font-size: 2rem;
  margin-bottom: 1.2rem;
  font-weight: 700;
  white-space: pre-line; 
}

#intro p {
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto;
  white-space: pre-line;     /* ← Додає перенесення */
  word-break: break-word;  /* ← Розбиває довгі слова */
}


/* ==== Блок 2: Інструкція howto ==== */
#howto {
  padding: 3rem 1rem;
  background: #f0f0f0;
  text-align: center;
}

#howto h2 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
}

.howto-steps {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 600px;
  text-align: left;
}

.howto-steps li {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  position: relative;
  padding-left: 1.5rem;
}

.howto-steps li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #3998f1;
  font-weight: bold;
}

/* ==== Блок 4: Можливості features ==== */
/* ==== Блок 4: Можливості features ==== */
#features {
  padding: 3rem 1rem;
  background: #f0f0f0;
  text-align: center;
}

#features h2 {
  font-size: 1.8rem;
  margin-bottom: 2rem;
}

/* Контейнер для двох колонок */
.features-columns {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
}

/* Кожен стовпчик */
.features-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1 1 45%;
  max-width: 500px;
}

/* Заголовок функції */
.features-list li {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
  position: relative;
  padding-left: 1.5rem;
  font-weight: bold;
}

.features-list li::before {
  content: "★";
  position: absolute;
  left: 0;
  color: #f39c12;
}

/* Опис функції */
.features-desc {
  font-size: 0.95rem;
  color: #555;
  margin: 0 0 1.25rem 1.5rem;
  line-height: 1.5;
  font-weight: 400;
  max-width: 42ch;
}

/* Мобільна адаптація: один стовпчик */
@media (max-width: 768px) {
  .features-columns {
    flex-direction: column;
    align-items: center;
  }

  .features-list {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* ==== Загальна адаптивність для секцій ==== */
section {
  width: 100%;
  box-sizing: border-box;
}
/* Забезпечуємо нормальну висоту глобуса після зміни структури */
#demo {
  display: flex;
  height: 100vh;
  overflow: hidden;
  position: relative; /* додано */
}

#content {
  flex: 1;
  height: 100vh;     /* додаємо ЯВНУ висоту */
  display: flex;
  min-height: 0;
  overflow: hidden;
}
#comparison-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.comparison-item {
  padding: 0.6rem 0.8rem 0.6rem 1.8rem;  /* Збільшили відступ зліва для кружечка */
  font-size: 0.9rem;
  cursor: pointer;
  color: #333;
  transition: background 0.2s, color 0.2s;
  border-radius: 4px;
}

.comparison-item:hover {
  color: #999; /* Світло-сірий при наведенні */
}

.comparison-item.active {
  color: #3998f1; /* Синій активний */
  font-weight: bold;
}
.comparison-sublist.hidden {
  display: none;
}
.category-title {
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  cursor: pointer;
  color: #333;
  transition: background 0.2s, color 0.2s;
  border-radius: 4px;
}

.category-title:hover {
  color: #999;
}

.category-title.active {
  color: #3998f1;
  font-weight: bold;
}

/* ==== Верхня панель з кнопкою і мовами ==== */
#top-bar {
  position: absolute;
  top: 20px;
  right: 30px;
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 10;
}

/* Кнопка "До функцій" */
.scroll-button {
  margin-right: 32px;
  cursor: pointer;
  text-decoration: none;
  color: white;
  font-weight: normal;     /* бо в описі subtitle не жирний */
  font-size: 1.1rem;       /* такий самий як в #intro p */
  line-height: 1.6;        /* для відповідності */
  user-select: none;
  transition: color 0.2s;
}


.scroll-button:hover {
  color: #aaa;
}
/* ==== Styles for Scaling Methods section ==== */
#scaling-methods {
  background-color: #fff;           /* білий фон */
  padding: 2rem;                    /* внутрішні відступи */
  border-radius: 0.5rem;            /* заокруглені кути */
  margin: 2rem 0;                   /* зовнішні відступи зверху/знизу */
}

#scaling-methods h3,
#blog-entries .blog-entry h2 {
  text-align: center;               /* заголовки по центру */
  width: 33.333%;                   /* ширина 1/3 від контейнера */
  margin: 1.5rem auto 0;      /* відступи та центрування */
  position: relative;
}
#scaling-methods h3::before,
.blog-entry p::before {
  content: "●";                     /* кружечок перед заголовком */
  display: inline-block;
  margin-right: 0.5rem;
  color: #3998f1;
}

#scaling-methods p,
#blog-entries .blog-entry p {
  width: 50%;                   /* звуження тексту до 1/3 ширини */
  margin: 0 auto 1rem;                /* центрування */
  text-align: center;               /* вирівнювання тексту по центру */
  font-size: 1rem;
  line-height: 1.6;
  color: #555;
}
/* ==== Стиль загального заголовка секції розрахунків ==== */
#scaling-methods h2,
#blog-intro h1 {
  font-size: 1.8rem;
  margin-bottom: 2rem;
  text-align: center;    /* якщо ще не було */
}

@media (max-width: 768px) {
  #scaling-methods {
    padding: 1.5rem;
  }
  #scaling-methods h3,
  #blog-entries .blog-entry h2 {
    font-size: 1.125rem;
    width: 90%;                     /* адаптивна ширина на мобільних */
  }
  #scaling-methods p,
  #blog-entries .blog-entry p {
    width: 90%;
    font-size: 0.95rem;
  }
}

#about-us {
  padding: 3rem 1rem;
  background: #f0f0f0;
  text-align: center;
}

#about-us p {
  margin: 1rem auto;
  font-size: 1rem;
  color: #333;
  line-height: 1.6;
}

.about-youtube img {
  width: 40px;
  height: 40px;
  vertical-align: middle;
}

.about-description {
  max-width: 600px;
  margin: 2rem auto 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #555;
}

/* Секція 1: Верхня панель блогу */
#blog-top-bar {
  background: url('../res/orbitanica.png') center center / cover no-repeat;
  padding: 10px 20px;              /* 10px зверху/знизу, 20px ліворуч/праворуч */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.blog-lang-switch {
  display: flex;
  justify-content: flex-end;  /* всі елементи прижмуться до правого краю */
  align-items: center;
  gap: 15px;
}

#blog-intro {
  width: 100%;               /* займати всю ширину сторінки */
  padding: 40px 20px;        /* відступи зверху/знизу 40px, з боків 20px */
  text-align: center;        /* центр тексту */
  background-color: #f0f0f0; /* світло-сірий фон, як у “Про нас” */
}
/* Звужуємо опис під заголовком блогу */
#blog-intro p {
  max-width: 60ch;   /* ~60 символів у рядку — читабельно */
  margin: 0 auto 1.5rem;
  line-height: 1.6;
  color: #555;
}

/* На вузьких екранах даємо ширше поле, щоб не ламати верстку */
@media (max-width: 768px) {
  #blog-intro p {
    max-width: 90%;
  }
}

/* Секція 3: Записи блогу */
#blog-entries {
  max-width: 800px;
  margin: 20px auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 30px;                       /* відстань між записами */
}
.blog-entry {
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 20px;
}
.blog-entry h2 {
  font-size: 1.5rem;
  margin-bottom: 8px;
}
.blog-entry p {
  font-size: 1rem;
  line-height: 1.5;
  color: #444;
}
.blog-entry .blog-date {
  font-size: 0.85rem;
  color: #888;
  margin-top: 6px;
}
#blog-entries .blog-entry p {
  max-width: 90ch;   /* читається краще, ніж 50% */
  width: 100%;       /* або заберіть width зовсім */
}
/* Адаптивне відео у записі блогу */
.video-wrapper {
  position: relative;
  padding-top: 56.25%;      /* 16:9 пропорція */
  margin: 1rem auto;        /* відступи зверху/знизу */
  max-width: 800px;         /* вирівнюємо з шириною запису */
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
/* ===== Блог: макет дві колонки ===== */
#blog-container {
  display: flex;      /* дві колонки */
  gap: 30px;          /* відстань між ними */
  width: 100%;        /* розтягнути на весь екран */
  margin: 0;          /* без зовнішніх відступів */
}

#blog-sidebar {
  flex: 0 0 240px;   /* фіксована ширина 180 px */
  overflow-y: auto;  /* власний скрол, якщо пунктів багато */
  padding: 20px 15px;
  background: #ffffff;
}

.blog-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Лічильник + кружечок перед заголовком */
.blog-nav li {
  position: relative;   /* щоб можна було розмістити псевдоелемент */
  margin-bottom: 10px;  /* залишаємо ваш відступ */
  padding-left: 1.2rem; /* місце для кружечка */
}

.blog-nav li::before {
  content: "●";         /* сам кружечок */
  position: absolute;
  left: 0;              /* вирівнюємо по лівому краю пункту */
  top: 0.25rem;         /* трохи опускаємо, щоб центрувався по тексту */
  font-size: 0.65rem;   /* розмір маркера */
  color: #3998f1;          /* нейтрально-сірий колір */
}

.blog-nav a {
  text-decoration: none;
  color: #000000;
  font-size: 1rem;
  transition: color 0.2s;
}

.blog-nav a:hover {
  color: #3998f1;
}

/* Права колонка (#blog-entries) already styled; width — решта простору */
.blog-nav-title {
  text-align: center;   /* по центру панелі */
  margin: 0 0 15px;     /* відступ униз */
  font-size: 1.1rem;
  font-weight: bold;
}
.lang-icon {
  width: 28px;   /* було 24px → тепер іконка стала меншою */
  height: auto;
  margin: 0 2px; /* можна трохи зменшити відступ, аби прапорці не “роз’їхались” */
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
}
/* Активна мова — повна насиченість і тонка рамка */
.lang-icon.active {
  opacity: 1;                     /* прибираємо напівпрозорість */
}