@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Open+Sans:wght@400;600&display=swap');

:root {
  /* Тематичні кольорові змінні (Слух / Здоровий спосіб життя) */
  --ear-base: #fdfbf7;
  --ear-board: #ffffff;
  --ear-vivid: #D946EF; 
  --ear-vivid-dim: #C026D3;
  --ear-text: #171717;
  --ear-text-muted: #525252;
  --ear-line: #e5e5e5;
  --ear-depth: rgba(0,0,0,0.1);
  --ear-grad: linear-gradient(135deg, #D946EF, #8B5CF6);
  --ear-overlay: rgba(23, 23, 23, 0.85);

  /* Шрифтові змінні */
  --font-display: 'Oswald', sans-serif;
  --font-body: 'Open Sans', sans-serif;
}

body {
  font-family: var(--font-body);
  background-color: var(--ear-base);
  color: var(--ear-text);
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

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

/* Мобільне меню (CSS only) */
.nav-tgl { display: none; }
.nav-lbl { display: none; cursor: pointer; }

@media (max-width: 768px) {
  .nav-lbl { display: block; }
  .nav-links { 
    display: none; 
    width: 100%; 
    flex-direction: column; 
    text-align: center;
    padding-top: 1rem;
  }
  .nav-tgl:checked + .nav-lbl + .nav-links { display: flex; }
}

/* Семантичні класи замість заборонених */
.page-limit { 
  max-width: 1440px; 
  margin: 0 auto; 
  padding: 0 5%; 
}

.listen-act { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  padding: 1.2rem 3rem; 
  font-weight: bold; 
  border-radius: 9999px; 
  text-decoration: none; 
  transition: transform 0.3s ease; 
}
.listen-act:hover { 
  transform: translateY(-3px); 
}