/* Общие стили */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

:root {
  --primary-color: #007790;
  --secondary-color: #007790;
  --accent-color: #FF9800;
  --dark-color: #333;
  --light-color: #f8f9fa;
  --success-color: #28a745;
  --warning-color: #ffc107;
  --danger-color: #dc3545;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #fff;
}

/* Навигация */
.navbar-brand {
  font-size: 1.5rem;
}

.navbar-nav .nav-link {
  font-weight: 500;
  transition: color 0.3s;
}

.navbar-nav .nav-link:hover {
  color: #fff !important;
  opacity: 0.9;
}

/* Герой секция */
.hero-section {
  background: linear-gradient(135deg, #007790 0%, #005566 100%);
  color: white;
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('../images/hero-bg.svg') no-repeat center center;
  background-size: cover;
  opacity: 0.1;
}

.hero-section h1 {
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.hero-section .lead {
  font-size: 1.25rem;
  font-weight: 300;
}

.hero-image-container {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.code-window {
  background: #2d2d2d;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  transform: rotateY(-5deg) rotateX(5deg);
  transition: transform 0.5s ease;
}

.code-window:hover {
  transform: rotateY(0) rotateX(0);
}

.code-header {
  background: #3d3d3d;
  padding: 10px 15px;
  display: flex;
  align-items: center;
}

.code-dots {
  display: flex;
  margin-right: 10px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 5px;
}

.red { background: #ff5f56; }
.yellow { background: #ffbd2e; }
.green { background: #27c93f; }

.code-title {
  color: #aaa;
  font-size: 0.8rem;
  flex-grow: 1;
  text-align: center;
}

.code-content {
  padding: 20px;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #f8f8f2;
  overflow-x: auto;
}

.code-content pre {
  margin: 0;
  white-space: pre-wrap;
}

/* Карточки особенностей */
.feature-card {
  transition: transform 0.3s, box-shadow 0.3s;
  border-radius: 10px;
  overflow: hidden;
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
}

.feature-icon {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

/* Аккордеон уроков */
.accordion-button {
  font-weight: 500;
  font-size: 1.1rem;
}

.accordion-button:not(.collapsed) {
  background-color: #e6f7ff;
  color: #007790;
}

.accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23007790'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Секция примеров кода */
.card {
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s;
}

.card:hover {
  transform: translateY(-5px);
}

.card-header {
  font-weight: 500;
  font-size: 1.1rem;
}

/* Секция практики */
.practice-section .card {
  transition: all 0.3s;
  border-width: 2px;
}

.practice-section .card:hover {
  transform: scale(1.03);
}

/* Секция "О курсе" */
.stats-container {
  border-radius: 15px;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

.stat-number {
  font-weight: 700;
}

/* Подвал */
footer a {
  transition: color 0.3s;
}

footer a:hover {
  color: #4CAF50 !important;
}

.social-links a {
  transition: transform 0.3s;
}

.social-links a:hover {
  transform: translateY(-5px);
}

/* Анимации */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 50%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp {
  animation-name: fadeInUp;
  animation-duration: 1s;
}

/* Адаптивность */
@media (max-width: 768px) {
  .hero-section {
    text-align: center;
  }
  
  .hero-section .btn {
    margin: 10px 0;
  }
  
  .feature-card {
    margin-bottom: 20px;
  }
  
  .code-window {
    transform: none;
  }
  
  .code-window:hover {
    transform: none;
  }
}

/* Синтаксическая подсветка кода */
.keyword {
  color: #f92672;
}

.string {
  color: #a6e22e;
}

.comment {
  color: #75715e;
}

.builtin {
  color: #007790;
}

.function {
  color: #a6e22e;
}

.literal {
  color: #ae81ff;
}

.number {
  color: #ae81ff;
}

/* Custom styles for code blocks */
pre[class*="bg-dark"] {
  border: 2px solid #333 !important; /* Darker border */
  font-size: 1.1rem !important; /* Larger font size */
  position: relative;
  padding-top: 40px !important; /* Make space for the copy button */
}

/* Additional styles for better code block appearance */
pre code {
  font-size: 1.1rem !important;
}

/* Copy button styles */
.copy-button {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: #007790;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 0.8rem;
  cursor: pointer;
  z-index: 10;
  transition: background-color 0.3s;
}

.copy-button:hover {
  background-color: #005566;
}

.copy-button.copied {
  background-color: #28a745;
}

/* Copy button for light code blocks */
pre[class*="bg-white"] {
  position: relative;
  padding-top: 40px !important; /* Make space for the copy button */
}

pre[class*="bg-white"] .copy-button {
  background-color: #6c757d;
}

pre[class*="bg-white"] .copy-button:hover {
  background-color: #495057;
}